Returns the first element within the document (using depth-first pre-order traversal of the document's nodes|by first element in document markup and iterating through sequential nodes by order of amount of child nodes) that matches the specified group of selectors.
Syntax
element = document.querySelector(selectors);
where
element
is an element object.selectors
is a string containing one or more CSS selectors separated by commas.
Example
In this example, the first element in the document with the class "myclass
" is returned:
var el = document.querySelector(".myclass");
Example: Powerful
Selectors can also be really powerful as demonstrated in the following example. Here, the first element <input name="login"/>
within a <div class="user-panel main">
in the document is returned:
var el = document.querySelector("div.user-panel.main input[name=login]");
Notes
Returns null
if no matches are found; otherwise, it returns the first matching element.
If the selector matches an ID and this ID is erroneously used several times in the document, it returns the first matching element.
Throws a SYNTAX_ERR
exception if the specified group of selectors is invalid.
querySelector()
was introduced in the Selectors API.
The string argument pass to querySelector
must follow the CSS syntax.
CSS Pseudo-elements will never return any elements, as specified in the Selectors API
To match ID or selectors that do not follow the CSS syntax (by using a colon or space inappropriately for example), you must escape the character with a back slash. As the backslash is an escape character in JavaScript, if you are entering a literal string, you must escape it twice (once for the JavaScript string, and another time for querySelector):
<div id="foo\bar"></div> <div id="foo:bar"></div> <script> console.log('#foo\bar') // "#fooar" document.querySelector('#foo\bar') // Does not match anything console.log('#foo\\bar') // "#foo\bar" console.log('#foo\\\\bar') // "#foo\\bar" document.querySelector('#foo\\\\bar') // Match the first div document.querySelector('#foo:bar') // Does not match anything document.querySelector('#foo\\:bar') // Match the second div </script>
Specifications
Specification | Status | Comment |
---|---|---|
Selectors API Level 2 The definition of 'document.querySelector()' in that specification. |
Working Draft | |
Selectors API Level 1 The definition of 'document.querySelector()' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1 | 3.5 | 8 | 10 | 3.2 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | (Yes) | 9 | 10.0 | 3.2 |