Draft
This page is not complete.
The ParentNode
mixin defines the querySelector()
method as returning an Element
representing the first element matching the specified group of selectors which are descendants of the object on which the method was called.
If you need all the elements matching the selector list, use querySelectorAll()
instead.
Note: This method is implemented as Document.querySelector()
, DocumentFragment.querySelector()
and Element.querySelector()
.
Syntax
element = parentNode.querySelector(selectors);
Parameters
selectors
- A
DOMString
containing one or more selectors to match against. This string must be a valid compound selector list supported by the browser; 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
The first Element
that matches at least one of the specified selectors or null
if no such element is found.
Note: If the specified selectors
include a CSS pseudo-element, the returned value is always null
.
Exceptions
SyntaxError
- The syntax of the specified
selectors
string is not valid.
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'ParentNode.querySelector()' in that specification. |
Living Standard | Living standard |
Selectors API Level 2 The definition of 'ParentNode.querySelector()' in that specification. |
Obsolete | No change |
DOM4 The definition of 'ParentNode.querySelector()' 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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
querySelector | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE
Full support
9
| Opera Full support 10 | Safari Full support 4 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support Yes | Opera Android Full support 10.1 | Safari iOS Full support 3.2 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- 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.querySelector()
,Document.querySelector()
, andDocumentFragment.querySelector()