Nuestros voluntarios aún no han traducido este artículo al Español. ¡Únete a nosotros y ayúdanos a traducirlo!
También puedes leer el artículo en English (US).
The ParentNode
mixin defines the querySelectorAll()
method as returning a NodeList
representing a list of elements matching the specified group of selectors which are descendants of the object on which the method was called.
If you need only a single result, consider the querySelector()
method instead.
Note: This method is implemented as Element.querySelectorAll()
, Document.querySelectorAll()
, and DocumentFragment.querySelectorAll()
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, aSyntaxError
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 backspace 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 descendant node that matches at least one of the specified selectors.
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
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]");
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
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'ParentNode.querySelectorAll()' in that specification. |
Living Standard | Living standard |
Selectors API Level 2 The definition of 'ParentNode.querySelectorAll()' in that specification. |
Obsolete | No change |
DOM4 The definition of 'ParentNode.querySelectorAll()' in that specification. |
Obsolete | Initial definition |
Selectors API Level 1 The definition of 'document.querySelector()' in that specification. |
Obsolete | Original definition |
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 3.5 | IE
Full support
9
| Opera Full support 10 | Safari Full support 3.2 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile ? | Firefox Android Full support Yes | Opera Android Full support 10 | Safari iOS Full support 3.2 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
See also
- 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()
, andDocumentFragment.querySelectorAll()