# Document.querySelector()

Returns the first Element within the document that matches the specified selector, or group of selectors, or null if no matches are found.

Note: The matching is done 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.

## 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" (\b is the backspace control character)
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.
Obsolete
Selectors API Level 1
The definition of 'document.querySelector()' in that specification.
Obsolete Initial definition

## Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1 (Yes) 3.5 8 10 3.2
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) (Yes) 9 10.0 3.2