`querySelectorAll` 是一个 JavaScript 方法,用于在文档中选择符合特定选择器的所有元素。这个方法返回一个 `NodeList` 对象,该对象包含文档中匹配指定选择器的所有元素。如果没有找到匹配的元素,它将返回一个空的 `NodeList`。
使用 `querySelectorAll` 的基本语法如下:
```javascript
document.querySelectorAll(selector);
```
其中 `selector` 是一个字符串,代表 CSS 选择器,用来匹配文档中满足条件的元素。例如:
* 选择所有的段落:`"p"`
* 选择所有具有特定类的元素:`.myClass"`
* 选择特定ID的元素(但请注意,不建议在大量文档上使用这种方式因为它会导致较长的遍历时间):`"#myID"`
* 选择嵌套元素的后代:`"div p"` 会选择所有在 `div` 元素内部的 `p` 元素。
* 使用伪类选择器选择特定状态的元素等。
示例:
假设你有以下的 HTML 结构:
```html
Paragraph 1
Paragraph 2
```
如果你想选择所有的 `p` 元素,你可以这样做:
```javascript
let paragraphs = document.querySelectorAll("p"); // 这将返回一个包含两个 p 元素的 NodeList。
```
如果你想选择所有具有特定类的元素,例如 `.text` 类,你可以这样做:
```javascript
let textElements = document.querySelectorAll(".text"); // 这将返回一个包含两个具有 .text 类的元素的 NodeList。
```
总的来说,`querySelectorAll` 是一个强大的工具,允许你通过 CSS 选择器选择页面上的任何元素。返回的是一个静态的 `NodeList`,这意味着它不会随着文档的变化而自动更新。如果你需要实时更新的集合,可能需要使用其他方法或技巧。