HTML DOM Document querySelector() Method

Definition and Usage

querySelector() The method returns elements that match the CSS selectorFirstelements.

To returnAllmatches (not just the first match), use querySelectorAll() instead.

If the selector is invalid, then querySelector() and querySelectorAll() will throw SYNTAX_ERR Exception.

Example

Example 1

Get the first <p> element:

document.querySelector("p");

Try It Yourself

Example 2

Get the first element with class="example":

document.querySelector(".example");

Try It Yourself

Example 3

Get the first <p> element with class="example":

document.querySelector("p.example");

Try It Yourself

Example 4

Change the text of the element with id="demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Try It Yourself

Example 5

Select the first <p> element whose parent element is the <div> element:

document.querySelector("div > p");

Try It Yourself

Example 6

Select the first <a> element with the "target" attribute:

document.querySelector("a[target]");

Try It Yourself

Example 7

Select the first <h3> or the first <h4>:

<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Try It Yourself

Example 8

Select the first <h3> or the first <h4>:

<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Try It Yourself

Syntax

document.querySelector(cssSelectors)

Parameter

Parameter Description
cssSelectors

Required. One or more CSS selectors.

CSS selectors select HTML elements based on id, class, type, attributes, attribute values, and more.

For a complete list, please visit our CSS Selector Reference Manual.

For multiple selectors, separate each selector with a comma (see the example above the page).

Return Value

Type Description
Object

NodeList containing the first element that matches the CSS selector.

Returns null if no match is found.

The Difference Between HTMLCollection and NodeList

NodeList and HTMLcollection Very similar.

Both are similar collections of nodes (elements) extracted from the document, which can be accessed by index number (subscript). The index starts from 0.

Both have length Property, it returns the number of elements in the list (collection).

HTMLCollection isDocument elementcollection.

NodeList isDocument nodecollection of (element nodes, attribute nodes, and text nodes).

HTMLCollection items can be accessed by their name, id, or index number.

NodeList items can only be accessed through their index number.

HTMLCollection is alwaysLivecollection.

For example, if an <li> element is added to the list in the DOM, the list in the HTMLCollection will also change.

NodeList is usuallyStaticcollection.

For example, if an <li> element is added to the list in the DOM, the list in the NodeList will not change.

getElementsByClassName() and getElementsByTagName() Both methods return a live HTMLCollection.

querySelectorAll() The method returns a static NodeList.

childNodes The property returns a live NodeList.

Browser support

document.querySelector() It is a DOM Level 1 (1998) feature.

All browsers support it:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Related pages

Tutorial:

CSS Selectors

CSS Selector Reference Manual

HTML DOM NodeList Reference Manual

querySelector Method:

querySelector() Method

querySelectorAll() Method

GetElement Method:

getElementById() method

getElementsByTagName() method

getElementsByClassName() method