Document.querySelectorAll() - Web APIs 编辑

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

Note: This method is implemented based on the ParentNode mixin's querySelectorAll() method.

Syntax

elementList = parentNode.querySelectorAll(selectors);

Parameters

selectors
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.

Return value

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

Note: If the specified selectors include a CSS pseudo-element, the returned list is always empty.

Exceptions

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

Examples

Obtaining a list of matches

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

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

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

const 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.

const container = document.querySelector("#test");
const 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:

const 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:

const container = document.querySelector("#userlist");
const 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 use standard array notation to access the contents of the list. You can use any common looping statement, such as:

const 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

const select = document.querySelector('.select');
const 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:

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

Specifications

SpecificationStatusComment
DOM
The definition of 'ParentNode.querySelectorAll()' in that specification.
Living StandardLiving standard
Selectors API Level 2
The definition of 'ParentNode.querySelectorAll()' in that specification.
ObsoleteNo change
DOM4
The definition of 'ParentNode.querySelectorAll()' in that specification.
ObsoleteInitial definition
Selectors API Level 1
The definition of 'document.querySelector()' in that specification.
ObsoleteOriginal definition

Browser compatibility

BCD tables only load in the browser

See also

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:146 次

字数:10669

最后编辑:7 年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文