下面我来详细讲解一下JS中querySelector和getElementById方法的区别：
1. getElementById
getElementById是DOM提供的方法之一，它返回的是与指定id属性值匹配的元素，如果没有匹配的元素，则返回null。它的语法如下：
var elem = document.getElementById(id);
注意，id不能以数字开头。它只能选中HTML文档中的一个元素（即DOM树中的唯一元素），所以每个id只能用一次。示例如下：
<body>
<div id="box">元素1</div>
<div id="box">元素2</div>
</body>
<script>
var elem = document.getElementById('box');
console.log(elem); // 输出"元素1"
</script>
在上面的代码中，因为id属性不能重复，所以getElementById只会返回第一个匹配的元素，即"元素1"。
2. querySelector
querySelector是在后来的DOM规范中新增的方法，它通过CSS选择器选取指定的HTML元素，返回匹配的第一个元素，如果没有匹配的元素，则返回null。它的语法如下：
var elem = document.querySelector(selector);
其中，selector是要匹配的CSS选择器。示例如下：
<body>
<div class="box">元素1</div>
<div class="box">元素2</div>
</body>
<script>
var elem = document.querySelector('.box');
console.log(elem); // 输出"元素1"
</script>
在上面的代码中，querySelector选中的是class为"box"的第一个元素，即"元素1"。
区别
- 返回值不同
getElementById返回的是一个元素节点，而querySelector返回的是一个NodeList对象，如果想让它返回一个元素节点，可以使用querySelectorAll并将索引设为0。
- 元素选择方式不同
getElementById只能选择id相同的元素，querySelector可以选择任何CSS选择器匹配的元素。
综上所述，querySelector是一种更加灵活和强大的元素选择方式，可以根据不同的情况灵活选择使用。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS中 querySelector 与 getElementById 方法区别 - Python技术站
微信扫一扫 
支付宝扫一扫 