DEV Community
·
JavaScript 中的 querySelector 与 querySelectorAll 对比
内容提要
`querySelector` 用于选择第一个匹配的DOM元素，找不到则返回null。`querySelectorAll` 返回所有匹配元素的NodeList，找不到则返回空NodeList。示例中，`querySelector` 获取第一个 `<a>` 元素，而 `querySelectorAll` 获取所有 `<a>` 元素。
关键要点
-
querySelector用于选择第一个匹配的DOM元素，找不到则返回null。
-
querySelectorAll返回所有匹配元素的NodeList，找不到则返回空NodeList。
-
示例中，querySelector获取第一个<a>元素，而querySelectorAll获取所有<a>元素。
-
querySelector返回的结果是第一个匹配的元素。
-
querySelectorAll返回的结果是一个包含所有匹配元素的NodeList。
延伸解读
选择器的基本区别
在使用 `querySelector` 和 `querySelectorAll` 时，开发者需要明确选择的目标。如果只需要第一个匹配的元素，使用 `querySelector` 更为高效；而当需要处理多个元素时，`querySelectorAll` 则是更合适的选择。
NodeList 的特点
`querySelectorAll` 返回的 NodeList 是一个静态集合，意味着它不会随着 DOM 的变化而更新。这一点在动态网页中尤为重要，开发者需注意在操作 NodeList 时可能需要重新获取元素。
性能考虑
在性能方面，`querySelector` 通常比 `querySelectorAll` 更快，因为它只需查找第一个匹配项。对于大型 DOM 结构，频繁使用 `querySelectorAll` 可能会导致性能下降，因此应根据实际需求选择合适的函数。
延伸问答
querySelector 和 querySelectorAll 有什么区别？
querySelector 返回第一个匹配的DOM元素，找不到则返回null；而 querySelectorAll 返回所有匹配元素的NodeList，找不到则返回空NodeList。
如何使用 querySelector 获取第一个链接元素？
可以使用 `document.querySelector('a')` 来获取第一个 `<a>` 元素。
querySelectorAll 返回的是什么类型的对象？
querySelectorAll 返回的是一个包含所有匹配元素的 NodeList 对象。
如果使用 querySelectorAll 找不到匹配元素，会返回什么？
如果没有找到匹配元素，querySelectorAll 会返回一个空的 NodeList。
在示例中，querySelector 和 querySelectorAll 的输出有什么不同？
querySelector 输出第一个 `<a>` 元素，而 querySelectorAll 输出一个包含所有 `<a>` 元素的 NodeList。
如何使用 querySelectorAll 获取所有链接元素？
可以使用 `document.querySelectorAll('a')` 来获取所有 `<a>` 元素。
