js获取DOM节点的方式
getElementById
是通过标签的 id 名称来获取标签的
getElementsByClassName
是通过标签的 class 名称来获取标签的
getElementsByTagName
是通过过标签的 标签 名称来获取标签的
querySelector
是按照选择器的方式来获取第一个元素
querySelectorAll
是按照选择器的方式来获取所有元素
1.通过ID获取(getElementById)
//因为在一个页面中 id 是唯一的,所以获取到的就是一个元素
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box')
console.log(box) // <div></div>
</script>
</body>
2.通过class名称来获取(getElementsByClassName )
//因为页面中可能有多个元素的 class 名称一样,所以获取到的是一组元素哪怕你获取的 class 只有一个,
//那也是获取一组元素,只不过这一组中只有一个 DOM 元素而已
<body>
<div calss="box"></div>
<script>
var box = document.getElementsByClassName('box')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
</script>
</body>
3.getElementsByTagName通过标签名称来获取(getElementsByTagName)
// 因为页面中可能有多个元素的 标签 名称一样,所以获取到的是一组元素
// 哪怕真的只有一个这个标签名,那么也是获取一组元素,只不过这一组中只有一个 DOM 元素而已
<body>
<div></div>
<script>
var box = document.getElementsByTagName('div')
console.log(box) // [<div></div>]
console.log(box[0]) // <div></div>
</script>
</body>
4.通过选择器的方式来获取(querySelector)
// 也就是说,按照我们写 css 的时候的选择器来获取
// 这个方法只能获取到一个元素,并且是页面中第一个满足条件的元素
<body>
<div>第一个div</div>
<div class="box">第二个div</div>
<div id="box">第三个div</div>
<div number="1">第四个div</div>
<script>
console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素
console.log(document.querySelector('.box')) // 获取页面中第一个有 box 类名的元素
console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素
console.log(document.querySelector('div[number = '1']')) // 获取页面中div属性名为number = 1的元素
</script>
</body>
5.通过选择器的方式来获取所有元素(querySelectorAll )
//这个方法能获取到所有满足条件的元素,以一个伪数组的形式返回
<body>
<div>第一个div</div>
<div class="box">第二个div</div>
<div id="box">第三个div</div>
<div number="1">第四个div</div>
<script>
console.log(document.querySelectorAll('div')[0]) // 获取页面中的第一个 div 元素
console.log(document.querySelectorAll('.box')[0]) // 获取页面中第一个有 box 类名的元素
console.log(document.querySelectorAll('#box')[0]) // 获取页面中第一个 id 名为 box 的元素
console.log(document.querySelectorAll('div[number = '1']')[0]) // 获取页面中div属性名为number = 1的元素
</script>
</body>