简介
在前端开发中，获取DOM元素是常见的操作。而在JavaScript中，有两个常用的方法可以用来获取DOM元素：querySelector 和 getElementById。虽然这两个方法都可以实现获取DOM元素的功能，但它们具有不同的特性和适用场景。
本文将从深度和学习的角度探讨 querySelector 和 getElementById 的区别以及使用建议，希望能为大家提供指导意义。
区别
语法
querySelector 使用 CSS 选择器来查找元素，它接收一个字符串参数，表示要查找的元素。例如：
const element = document.querySelector('.example');getElementById 接收一个字符串参数，表示要查找的元素ID。例如：
const element = document.getElementById('example');返回值
querySelector 返回符合条件的第一个元素，如果没有找到则返回 null。
getElementById 返回指定ID的元素，如果没有找到则返回 null。
兼容性
querySelector 支持所有的现代浏览器，包括IE8+。
getElementById 是一个非常古老的API，但由于其广泛使用，在所有现代浏览器中都支持它。
应用场景
querySelector 适用于复杂的选择器，例如根据class、属性等来查找元素。而如果只是简单地查找一个ID元素，getElementById 更加高效。
另外，由于 querySelector 可以接收任意的CSS选择器，所以它可以查找到一个HTML文档中的任何元素。相比之下，getElementById 只能用来查找具有唯一ID的元素。
使用建议
在实际开发中，我们应该根据需求和场景选择合适的方法。以下是一些使用建议：
- 如果仅需根据ID获取元素，则使用
getElementById。 - 如果需要根据class、tag等选择器来获取元素，则使用
querySelector。 - 如果要获取多个元素，则使用
querySelectorAll。 - 如果需要在不支持
querySelector的浏览器中工作，则使用polyfill或其他替代方案。
示例代码
使用 querySelector
<div id="example" class="example">
<p>Hello, world!</p>
</div>
<script>
const element = document.querySelector('.example');
console.log(element);
</script>输出结果：
<div id="example" class="example">...</div>
使用 getElementById
<div id="example" class="example">
<p>Hello, world!</p>
</div>
<script>
const element = document.getElementById('example');
console.log(element);
</script>输出结果：
<div id="example" class="example">...</div>
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24415