Easy Tutorial
❮ Jsref Obj Error Prop Style Transition ❯

HTML DOM querySelector() Method

Element Object

Example

Modify the text content of the first child element of the <div> element with class="demo":

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

Definition and Usage

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

Note: The querySelector() method only returns the first element that matches the specified selector. If you need to return all matching elements, use the querySelectorAll() method instead.

For more CSS selectors, you can visit our CSS Selectors Tutorial and our CSS Selectors Reference.


Browser Support

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

Method Chrome IE Firefox Safari Opera
querySelector() 4.0 8.0 3.5 3.1 10.0

Syntax

Parameter Values

Parameter Type Description
CSS Selector String Required. Specifies one or more CSS selectors to match the element(s). Elements can be selected by their id, class, type, attribute, attribute value, etc. <br> <br>For multiple selectors, separate them with commas and the method will return the first matching element. <br> <br>Tip: For more CSS selectors, refer to our CSS Selectors Reference

Technical Details

DOM Version: Selectors Level 1 Element Object
Return Value: The first element that matches the specified CSS selector(s). If no matches are found, it returns null. If an invalid selector is specified, it throws a SYNTAX_ERR exception.
--- ---

More Examples

Example

Modify the content of the first <p> element within a <div> element:

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

Example

Modify the content of the first child element with class="example" within a <div> element:

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

Example

Modify the content of the first <p> element with class="example" within a <div> element:

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

Example

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

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

Example

The following example demonstrates the use of multiple selectors.

Assume you have selected two selectors: <h2> and <h3> elements.

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

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

However, if the <h3> element is before the <h2> element within the <div>, the <h3> element will be set to the specified background color.

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

Related Pages

JavaScript Reference: document.querySelector()


Element Object

❮ Jsref Obj Error Prop Style Transition ❯