//根据id获取标签
document.getElementById('元素ID');
//根据类名获取标签(数组)
document.getElementsByClassName('类名');
//根据标签名获取标签(数组)
document.getElementsByTagName('标签名');
//按照选择器的方式来获取元素
console.log(document.querySelector('div')); // 获取页面中的第一个 div 元素
console.log(docuemnt.querySelector('.box')); // 获取页面中第一个有 box 类名的元素
console.log(document.querySelector('#box')); // 获取页面中第一个 id 名为 box 的元素
console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素
console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素
//获取元素内部的 HTML 结构
var div = document.querySelector('div');
console.log(div.innerHTML);
div.innerHtml = "conten"; //赋值
//获取元素内部的文本
var div = document.querySelector('div');
console.log(div.innerText);
div.innerText = "content"; //赋值
//获取元素的某个属性(包括自定义属性)
<div a="100" class="box"></div>
<script>
var div = document.querySelector('div')
console.log(div.getAttribute('a')) // 100
console.log(div.getAttribute('class')) // box
</script>
//给元素设置一个属性
<div></div>
<script>
var div = document.querySelector('div')
div.setAttribute('a', 100)
div.setAttribute('class', 'box')
console.log(div) // <div a="100" class="box"></div>
</script>
//直接移除元素的某个属性
<div a="100" class="box"></div>
<script>
var div = document.querySelector('div')
div.removeAttribute('class')
console.log(div) // <div a="100"></div>
</script>
//给元素添加 css 样式
<div></div>
<script>
var div = document.querySelector('div')
div.style.width = "100px"
div.style.height = "100px"
div.style.backgroundColor = "pink"
console.log(div)
//<div style="width: 100px; height: 100px; background-color: pink;">
</script>
//获取元素样式(行内样式)
<div style="height:100px;"></div>
<script>
var oDiv = document.querySelector('div')
console.log(oDiv.style.height) // 100px
console.log(oDIv.style.width) // ''
</script>
//可获取行内样式,也可获取非行内样式
<style>
div{
width:100px;
}
</style>
<div style="height:100px;"></div>
<script>
var oDiv = document.querySelector('div')
console.log(window.getComputedStyle(oDiv).width) // 100px
console.log(window.getComputedStyle(oDiv).height) // 100px
</script>
<script>
var oDiv = document.querySelector('div')
console.log(oDiv.currentStyle.width) // 100px
console.log(oDiv.currentStyle.height) // 100px
</script>
//操作元素的类名的(div.className = "newClassName").,可复制
<div class="box"></div>
<script>
var div = document.querySelector('div')
console.log(div.className) // box
</script>
//获取某一个节点下所有的子一级节点(childNodes)
var oDiv = document.querySelector('div')
console.log(oDiv.childNodes)
//获取某一节点下所有的子一级 元素节点(children)
var oDiv = document.querySelector('div')
console.log(oDiv.children)
//获取某一节点下子一级的第一个节点(firstChild)
var oDiv = document.querySelector('div')
console.log(oDiv.firstChild)
//获取某一节点下子一级的最后一个节点(lastChild)
var oDiv = document.querySelector('div')
console.log(oDiv.lastChild)
//获取某一节点下子一级第一个元素节点
<div>
<p>hello</p>
<p>world</p>
</div>
<script>
var oDiv = document.querySelector('div')
console.log(oDiv.firstElementChild) // <p>hello</p>
</script>
//获取某一节点下子一级最后一个元素节点
var oDiv = document.querySelector('div')
console.log(oDiv.lastElementChild) // <p>world</p>
JS中的DOM操作
于 2023-09-04 15:01:53 首次发布