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
# ref-for-dom-parentnode-queryselectorall①

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
querySelectorAll

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见