Element: querySelectorAll() method - Web APIs | MDN
Skip to search
Element: querySelectorAll() method
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.
See full compatibility
Report feedback
The
Element
method
querySelectorAll()
returns a static (not live)
NodeList
representing a list of elements
matching the specified group of selectors which are descendants of the element on which
the method was called.
Syntax
js
querySelectorAll(selectors)
Parameters
selectors
A string containing one or more selectors to match. This string
must be a valid CSS selector string; if it isn't, a
SyntaxError
exception
is thrown.
Note that the HTML specification does not require attribute values to be valid CSS identifiers. If a
class
or
id
attribute value is not a valid CSS identifier, then you must escape it before using it in a selector, either by calling
CSS.escape()
on the value, or using one of the techniques described in
Escaping characters
. See
Escaping attribute values
for an example.
The selectors are applied to the entire document, not just the particular element on which
querySelectorAll()
is called. To restrict the selector to the element on which
querySelectorAll()
is called, include the
:scope
pseudo-class at the start of the selector. See the
selector scope
example.
Return value
A non-live
NodeList
containing one
Element
object for
each descendant node that matches at least one of the specified selectors. The elements are in document order — that is, parents before children, earlier siblings before later siblings.
Note:
If the specified
selectors
include a
CSS pseudo-element
, the returned list
is always empty.
Exceptions
SyntaxError
DOMException
Thrown if the syntax of the specified
selectors
string is not valid.
Examples
Getting all elements with a custom data value
This example uses the
attribute selector
to select multiple elements with a
data-name
data attribute that contains "funnel-chart-percent".
html
js
const refs = [
...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`),
];
Obtaining a list of matches
To obtain a
NodeList
of all of the
elements
contained within the element
myBox
js
const matches = myBox.querySelectorAll("p");
This example returns a list of all
elements within
myBox
with a class of either
note
or
alert
js
const matches = myBox.querySelectorAll("div.note, div.alert");
Here, we get a list of the document's
elements whose immediate
parent element is a
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