ParentNode.querySelectorAll() - Web API 接口参考 编辑

The ParentNode mixin defines the querySelectorAll() method 返回一个 NodeList 表示元素的列表，把当前的元素作为根与指定的选择器组相匹配。

如果你只需要一个结果，可以考虑使用querySelector()方法来代替。

Note: This method is implemented as Element.querySelectorAll(), Document.querySelectorAll(), and DocumentFragment.querySelectorAll()

语法

elementList = parentNode.querySelectorAll(selectors);

参数

selectors

一个或多个CSS选择器，这些选择器由逗号隔开。

A DOMString containing one or more selectors to match against. This string must be a valid CSS selector string; if it's not, a SyntaxError exception is thrown. See Locating DOM elements using selectors for more information about using selectors to identify elements. Multiple selectors may be specified by separating them using commas.

Note: Characters which are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, special care must be taken when writing string literals using these characters. See Escaping special characters for more information.

返回值

一个不存活的 NodeList ，每个子节点拥有一个 Element 对象，其中每个子节点至少与一个选择器相匹配。

Note: 如果指定的 selectors 包含CSS pseudo-element，那么返回的列表始终为空。

Exceptions

SyntaxError

The syntax of the specified selectors string is not valid.

例子

To obtain a NodeList of all of the <p> elements in the document:

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

这个例子返回了所有 class 为 "note" 或者 "alert" 的 div 元素的一个列表:

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

Here, we get a list of <p> elements whose immediate parent element is a div with the class "highlighted" and which are located inside a container whose ID is "test".

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

This example uses an attribute selector to return a list of the iframe elements in the document that contain an attribute named "data-src":

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

Here, an attribute selector is used to return a list of the list items contained within a list whose ID is "userlist" which have a "data-active" attribute whose value is "1":

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

User notes

querySelectorAll() behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results.

HTML

Consider this HTML, with its three nested <div> blocks.

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

JavaScript

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

In this example, when selecting ".outer .inner" in the context the <div> with the class "select", the element with the class ".inner" is still found, even though .outer is not a descendant of the base element on which the search is performed (".select"). By default, querySelectorAll() only verifies that the last element in the selector is within the search scope.

The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element:

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

规范

Specification	Status	Comment
DOM ParentNode.querySelectorAll()	Living Standard	Living standard
Selectors API Level 2 ParentNode.querySelectorAll()	Obsolete	No change
DOM4 ParentNode.querySelectorAll()	Obsolete	Initial definition
Selectors API Level 1 document.querySelector()	Obsolete	Original definition

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• Locating DOM elements using selectors
• Code snippets for querySelector()
• Attribute selectors in the CSS Guide
• Attribute selectors in the MDN Learning Area
• This method is available as Element.querySelectorAll(), Document.querySelectorAll(), and DocumentFragment.querySelectorAll()