HTML DOM querySelectorAll()
Method
Example
Get all elements with class="example" in the document:
var x = document.querySelectorAll(".example");
Definition and Usage
The querySelectorAll()
method returns all elements in the document that match a specified CSS selector(s), as a static NodeList object.
The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers, starting from 0.
Tip: You can use the length property of the NodeList object to determine the number of elements that match the specified selector, and then you can iterate through all elements and extract the info you want.
For more CSS selectors, refer to the CSS Selectors Tutorial and 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 |
---|---|---|---|---|---|
querySelectorAll() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
Note: Internet Explorer 8 supports CSS2 selectors. Internet Explorer 9 and later versions support CSS3 selectors.
Syntax
elementList = document.querySelectorAll(selectors);
elementList
is a static NodeList type of object.selectors
is a string containing one or more CSS selectors separated by commas.
Parameter Values
Parameter | Type | Description |
---|---|---|
CSS Selectors | String | Required. Specifies one or more CSS selectors to match the elements. These can be IDs, classes, types, attributes, attribute values, etc. <br><br>Multiple selectors are separated by commas (,). <br><br>Tip: For more information on CSS selectors, refer to the CSS Selectors Reference. |
Method
DOM Version: | Level 1 Document Object |
---|---|
Return Value: | A NodeList object representing all elements in the document that match the specified CSS selector(s). The NodeList is a static NodeList type of object. If the specified selector(s) are invalid, a SYNTAX_ERR exception is thrown. |
More Examples
Example
Get all <p>
elements in the document and set the background color of the first matching <p>
element (index 0):
// Get all <p> elements in the document
var x = document.querySelectorAll("p");
// Set the background color of the first <p> element
x[0].style.backgroundColor = "red";
Example
Get all <p>
elements with class="example" in the document and set the background color of the first matching <p>
element (index 0):
// Get all <p> elements with class="example" in the document
var x = document.querySelectorAll("p.example");
// Set the background color of the first <p> element with class="example"
x[0].style.backgroundColor = "red";
Example
Count the number of <p>
elements with class="example" in the document (using the NodeList object's length property):
var x = document.querySelectorAll(".example").length;
Example
Set the background color of all elements with class="example" in the document:
var x = document.querySelectorAll(".example");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Example
Set the background color of all <p>
elements in the document:
var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Example
Find all <a>
tags with a "target" attribute in the document and set their borders:
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}
Example
Find all <p>
elements whose parent is a <div>
element and set their background color:
var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Example
Set the background color of all <h2>
, <div>
, and <span>
elements in the document:
var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Related Articles
CSS Tutorial: CSS Selectors
CSS Reference: CSS Selectors Reference
JavaScript Tutorial: JavaScript HTML DOM NodeList
HTML DOM Reference: document.querySelector()
HTML DOM Reference: element.querySelectorAll()