JavaScript中querySelectorAll的基本用法及详细解析-牛翰网

前言

querySelectorAll 是 JavaScript 中用于查找符合指定 CSS 选择器的所有 DOM 元素的一个方法。与 querySelector 不同，querySelectorAll 返回的是一个静态的 NodeList，包含文档中匹配选择器的所有元素。

基本用法

let elements = document.querySelectorAll(selector);

selector: 这是一个 CSS 样式规则的字符串，用于指定选择器。
elements: 返回一个包含所有匹配元素的 NodeList（类数组对象）。如果没有匹配项，返回的 NodeList 是空的。

详细解析

1. 支持的选择器

querySelectorAll 支持的选择器与 querySelector 完全相同。它们的语法和功能与 CSS 选择器保持一致。常见的选择器有：

ID选择器: #id
```
let elements = document.querySelectorAll('#myId');
```
通常不需要使用 ID 选择器，因为 ID 是唯一的，但技术上仍然可以使用。
类选择器: .class
```
let elements = document.querySelectorAll('.myClass');
```
返回所有 class 为 myClass 的元素。

标签选择器: tag

let elements = document.querySelectorAll('div');

返回所有的 <div> 元素。

属性选择器: [attribute=value]
```
let elements = document.querySelectorAll('input[type="text"]');
```
返回所有 type 属性为 "text" 的 input 元素。
后代选择器: ancestor descendant
```
let elements = document.querySelectorAll('#container .item');
```
返回 id 为 container 的元素内部的所有 class="item" 的元素。
伪类选择器: :pseudo-class
```
let elements = document.querySelectorAll('li:nth-child(odd)');
```
返回所有满足 nth-child(odd) 规则的 li 元素（即奇数位置的元素）。

2. 返回一个静态 NodeList

querySelectorAll 返回的是一个 NodeList，这是一个类数组对象，类似于 HTMLCollection。它和真正的数组的区别主要体现在：

静态: NodeList 是静态的，意味着即使 DOM 发生变化，NodeList 内部的元素不会更新。它是在调用 querySelectorAll 时的那一刻被捕获的元素。
类数组: 虽然 NodeList 看起来像数组，但它不是一个真正的数组。它没有数组的一些内建方法，比如 push() 和 pop()。不过你可以通过 forEach 方法或通过 Array.from() 将其转为真正的数组。

遍历: 可以通过 for...of 循环、forEach、或者基于索引的传统 for 循环来遍历 NodeList。

let elements = document.querySelectorAll('.myClass');

// 通过 forEach 遍历
elements.forEach(function(element) {
  console.log(element);
});

// 通过传统的 for 循环遍历
for (let i = 0; i < elements.length; i++) {
  console.log(elements[i]);
}

// 使用 for...of 遍历
for (let element of elements) {
  console.log(element);
}

3. 没有找到匹配的元素

如果 querySelectorAll 没有找到任何匹配的元素，它返回一个空的 NodeList，而不是 null。因此不需要像 querySelector 那样检查是否返回 null。

let elements = document.querySelectorAll('.nonExistentClass');
console.log(elements.length); // 0，表示没有找到匹配项

4. 作用域

querySelectorAll 可以在全局范围 (document) 或者在特定元素的作用域中使用。

let container = document.querySelector('#container');
let items = container.querySelectorAll('.item');

这将在 container 元素的范围内，查找所有具有 .item 类的元素。

5. 伪类与组合选择器

你可以通过组合选择器和伪类选择器来创建非常强大的查询：

let elements = document.querySelectorAll('div > p:first-child');

这将返回所有 div 元素下的第一个子元素是 p 的元素。

6. 性能考虑

因为 querySelectorAll 返回所有匹配的元素，如果选择器非常复杂或者页面包含大量匹配元素，可能会对性能产生影响。在需要查找大量元素时，性能开销可能较大。对于常见的操作，通常性能差异可以忽略不计，但在大量操作中，简化选择器可以提高效率。

7. 与其他方法的比较

getElementsByClassName 和 getElementsByTagName
- 这些方法返回的也是类数组的 HTMLCollection，但它们是实时的，意味着如果 DOM 发生变化，HTMLCollection 会实时更新，而 NodeList 不会。
querySelector
- querySelector 只返回第一个匹配的元素，而 querySelectorAll 返回所有匹配的元素。