DEV Community
·
JavaScript 中的 querySelector 与 querySelectorAll 对比
💡
原文英文，约200词，阅读约需1分钟。
📝
内容提要
`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 返回第一个匹配的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>` 元素。
➡️
