如何使用 JavaScript DOM 中的 querySelectorAll()22

简介

querySelectorAll() 方法是 JavaScript DOM（文档对象模型）中一个强大的工具，可用于在 HTML 文档中查询元素。它接受一个 CSS 选择器作为参数，并返回一个包含匹配该选择器的所有元素的 NodeList 对象。本指南将介绍如何使用 querySelectorAll()，并提供一些示例来展示其在实际应用程序中的用法。

语法

querySelectorAll() 方法的语法如下：```
(selectors);
```

其中：* document：表示 HTML 文档的文档对象。
* selectors：要匹配的 CSS 选择器。

使用 CSS 选择器

querySelectorAll() 使用 CSS 选择器来匹配元素。CSS 选择器是一组用于指定特定 HTML 元素的规则。以下是一些常用的选择器：* *：匹配所有元素。
* #id：匹配具有指定 ID 的元素。
* .class：匹配具有指定类的元素。
* tagName：匹配具有指定标签名的元素。
* [attribute]：匹配具有指定属性的元素。

例子

以下是使用 querySelectorAll() 的一些示例：```
// 获取文档中所有段落元素
const paragraphs = ('p');
// 获取具有 "container" 类的所有元素
const containers = ('.container');
// 获取所有具有 "data-role" 属性的元素
const elementsWithRole = ('[data-role]');
```

NodeList 对象

querySelectorAll() 方法返回一个 NodeList 对象。NodeList 类似于数组，它包含所有匹配选择器的元素。您可以使用以下方法与 NodeList 交互：* length：返回 NodeList 中元素的数量。
* item(index)：返回指定索引处的元素。
* forEach()：对 NodeList 中的每个元素执行指定的回调函数。

实际应用

querySelectorAll() 可用于各种实际应用，例如：* 动态样式更改：通过在 CSS 中使用 querySelectorAll()，您可以根据特定条件动态更改元素的样式。
* 表单验证：使用 querySelectorAll()，您可以轻松找到表单元素并对其进行验证。
* DOM 操纵：querySelectorAll() 可用于查找和修改 HTML 文档中的元素。

限制

需要注意的是，querySelectorAll() 有一些限制：* 性能：在大型 HTML 文档中使用 querySelectorAll() 可能会影响性能。
* 只读：NodeList 对象是只读的，这意味着您不能向其中添加或删除元素。
* 不支持伪类：querySelectorAll() 不支持 CSS 伪类，例如 ":hover" 或 ":active"。

JavaScript DOM 中的 querySelectorAll() 方法是一个功能强大的工具，可用于在 HTML 文档中查询元素。通过理解其语法、CSS 选择器的使用方式以及 NodeList 对象，您可以有效地使用 querySelectorAll() 来增强您的 web 应用程序。

2025-01-18

上一篇：如何使用 JavaScript 实现页面滚动到顶部

下一篇：正则表达式（regex）在 JavaScript 中的应用