HTML DOM querySelector()
Method
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()