HTML DOM Element querySelector() Method

Definition and Usage

querySelector() The method returns the first child element that matches the specified CSS selector of the element.

Note:

querySelector() The method returns only the first element that matches the specified selector. To return all matches, use querySelectorAll() method.

See also:

Reference Manual:

classList property

className property

querySelectorAll() method

getElementsByTagName() method

getElementsByClassName() method

HTML DOM Style Object

Tutorial:

CSS Syntax

CSS Selector

CSS Selector Reference Manual

Instance

Example 1

Change the text of the first child element with class="example" in the <div> element:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

Try It Yourself

More examples are provided below the page.

Syntax

element.querySelector(CSSselectors)

Parameters

Parameters Description
CSSselectors

Required. String. Specifies one or more CSS selectors to match elements.

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

For multiple selectors, separate each selector with a comma.

The returned element depends on the first element found in the document (see the "More examples" below).

Tip:For a complete list of CSS selectors, please see our CSS Selector Reference Manual.

Technical Details

Return value:

Matches the first element that matches the specified CSS selector.

If no match is found, null is returned.

If the specified selector is invalid, a SYNTAX_ERR exception is thrown.
DOM Version: Selectors Level 1 Element Object

More examples

Example 2

Change the text of the first <p> element in the <div> element:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Try It Yourself

Example 3

Change the text of the first <p> element with class="example" in the <div> element:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Try It Yourself

Example 4

Change the text of the element with id="demo" in the <div> element:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Try It Yourself

Example 5

Add a red border to the first <a> element that sets the target attribute within the <div> element:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

Try It Yourself

Example 6

This example demonstrates how multiple selectors work.

Assuming you have two elements: <h2> and <h3> elements.

The following code will add a background color to the first <h2> element within the <div>:

<div id="myDIV">
  <h2>A h2 element</h2>
  <h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Try It Yourself

Example 7

However, if the <h3> element in the <div> is placed before the <h2> element, the <h3> element will have a red background color.

<div id="myDIV">
  <h3>A h3 element</h3>
  <h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Try It Yourself

Browser Support

The numbers in the table indicate the first browser version that fully supports this method.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

Related Pages

CSS Tutorial:CSS Selector

CSS Reference Manual:CSS Selector Reference Manual

JavaScript Tutorial:JavaScript HTML DOM Node List

JavaScript Reference Manual:document.querySelector()

JavaScript Reference Manual:element.querySelectorAll()

HTML DOM Reference Manual:document.querySelectorAll()