Document.querySelectorAll()

在此页

句法
范例
User notes
规范
浏览器兼容性
另请参阅
相关话题

Document 方法 querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

注意： This method is implemented based on the ParentNode mixin's querySelectorAll() 方法。

句法

elementList = parentNode.querySelectorAll(selectors);

参数

selectors: 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 使用选择器定位 DOM 元素 for more information about using selectors to identify elements. Multiple selectors may be specified by separating them using commas.

注意： 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 转义特殊字符了解更多信息。

返回值

A non-live NodeList containing one 元素 object for each element that matches at least one of the specified selectors or an empty NodeList in case of no matches.

注意： 若指定 selectors include a CSS pseudo-element , the returned list is always empty.

异常

SyntaxError: The syntax of the specified selectors string is not valid.

范例

Obtaining a list of matches

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

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

This example returns a list of all <div> elements within the document with a class of either note or alert :

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']");

Accessing the matches

Once the NodeList of matching elements is returned, you can examine it just like any array. If the array is empty (that is, its length property is 0), then no matches were found.

Otherwise, you can simply use standard array notation to access the contents of the list. You can use any common looping statement, such as:

var highlightedItems = userList.querySelectorAll(".highlighted");
highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});

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.

: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

规范

规范	状态	注释
DOM The definition of 'ParentNode.querySelectorAll()' in that specification.	实时标准	Living standard
Selectors API Level 2 The definition of 'ParentNode.querySelectorAll()' in that specification.	过时	无变化
DOM4 The definition of 'ParentNode.querySelectorAll()' in that specification.	过时	初始定义
Selectors API Level 1 在该规范中的 document.querySelector() 定义。	过时	Original definition

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`querySelectorAll`	Chrome 1	Edge 12	Firefox 3.5	IE 8	Opera 10	Safari 3.2	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 3	Samsung Internet Android 1.0

图例

完整支持

另请参阅

使用选择器定位 DOM 元素
Attribute selectors in the CSS Guide
Attribute selectors in the MDN Learning Area
Element.querySelector() and Element.querySelectorAll()
Document.querySelector()
DocumentFragment.querySelector() and DocumentFragment.querySelectorAll()
ParentNode.querySelector() and ParentNode.querySelectorAll()
Code snippets for querySelector()

元数据

最后修改： May 22, 2020

在此页

句法

参数

返回值

异常

范例