Document.querySelectorAll

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

概述

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

备注：此方法基于ParentNode mixin 的querySelectorAll() 实现。

语法

js
querySelectorAll(selectors)

参数

selectors

一个包含一个或多个匹配的选择器的字符串。其必须是一个有效的 CSS 选择器字符串，如果不是，会抛出 SyntaxError 异常。有关使用选择器标识元素的更多信息，请参阅使用选择器定位 DOM 元素，可以通过使用逗号分隔多个选择器来指定它们。

备注：必须使用反斜杠字符转义不属于标准 CSS 语法的字符。由于 JavaScript 也使用反斜杠转义，因此在使用这些字符编写字符串文字时必须特别小心。有关详细信息，请参阅转义特殊字符

返回值

一个静态 NodeList，包含一个与至少一个指定选择器匹配的元素的Element对象，或者在没有匹配的情况下为空NodeList

备注：如果 selectors 参数中包含 CSS 伪元素，则返回的列表始终为空。

异常

SyntaxError

如果指定的 选择器 不合法，会抛出错误。如$("##div")

示例

获取匹配列表

要获取文档中所有<p>元素的NodeList。

js
var matches = document.querySelectorAll("p");

此示例返回文档中所有<div>元素的列表，其中 class 包含"note"或"alert"：

js
var matches = document.querySelectorAll("div.note, div.alert");

在这里，我们得到一个<p>元素的列表，其直接父元素是一个 class 为"highlighted"的div，并且位于 ID 为"test"的容器内。

js
var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");

此示例使用属性选择器返回文档中属性名为"data-src"的iframe元素列表：

js
var matches = document.querySelectorAll("iframe[data-src]");

这里，属性选择器用于返回 ID 为"userlist"的列表中包含值为"1"的"data-active"属性的元素

js
var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");

访问匹配项

一旦返回匹配元素的NodeList，就可以像任何数组一样检查它。如果数组为空（即，其length属性为 0），则找不到匹配项。

否则，你只需使用标准数组方法来访问列表的内容。你可以使用任何常见的循环语句，例如：

js
var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function (userItem) {
  deleteUser(userItem);
});

用户备注

querySelectorAll() 的行为与大多数常见的 JavaScript DOM 库不同，这可能会导致意外结果。

HTML

考虑这个 HTML 及其三个嵌套的<div>块

html
<div class="outer">
  <div class="select">
    <div class="inner"></div>
  </div>
</div>

JavaScript

js
var select = document.querySelector(".select");
var inner = select.querySelectorAll(".outer .inner");
inner.length; // 1, not 0!

在这个例子中，当在<div>上下文中选择带有"select"类的".outer .inner"时，仍然会找到类".inner"的元素，即使.outer不是基类的后代 执行搜索的元素（".select"）。默认情况下，querySelectorAll()仅验证选择器中的最后一个元素是否在搜索范围内。

:scope 伪类符合预期的行为，只匹配基本元素后代的选择器：

js
var select = document.querySelector(".select");
var inner = select.querySelectorAll(":scope .outer .inner");
inner.length; // 0

规范

Specification
DOM Standard
# ref-for-dom-parentnode-queryselectorall①

浏览器兼容性

BCD tables only load in the browser

参见