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.
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.
js
querySelectorAll(selectors)
selectors
A string 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.
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.
SyntaxError
DOMException
Thrown if the syntax of the specified selectors
string is not valid.
To obtain a NodeList
of all of the <p>
elements in the document:
js
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
:
js
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
.
js
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
:
js
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
:
js
const container = document.querySelector("#userlist"); const matches = container.querySelectorAll("li[data-active='1']");
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:
js
const highlightedItems = userList.querySelectorAll(".highlighted"); highlightedItems.forEach((userItem) => { deleteUser(userItem); });
Specification |
---|
DOM Standard # ref-for-dom-parentnode-queryselectorall① |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
querySelectorAll |
1 | 12 | 3.5 | 98querySelectorAll() is supported, but only for CSS 2.1 selectors. |
10 | 3.1 | 4.4 | 18 | 4 | 10.1 | 2 | 1.0 |
Element.querySelector()
and Element.querySelectorAll()
Document.querySelector()
DocumentFragment.querySelector()
and DocumentFragment.querySelectorAll()
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll