Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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

See also