HTML DOM querySelectorAll() Method
Example
Set the background color of the first element (in "myDiv") with class="example":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
list[0].style.backgroundColor = "red";
Try it Yourself »
More "Try it Yourself" examples below.
Description
The querySelectorAll() method returns all child elements that matches a CSS selector(s).
The querySelectorAll() method returns a NodeList.
The querySelectorAll() method throws a SYNTAX_ERR exception if the selector(s) is invalid
Tutorials:
The JavaScript Node List Tutorial
QuerySelector Methods:
The Element querySelector() Method
The Element querySelectorAll() Method
The Document querySelector() Method
The Document querySelectorAll() Method
GetElement Methods:
The Document getElementById() Method
NodeList
A NodeList is an array-like collection (list) of nodes.
The nodes in the list can be accessed by index. The index starts at 0.
The length Poperty returns the number of nodes in the list.
Syntax
element.querySelectorAll(CSS selectors)
Parameters
| Parameter | Description |
| CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Return Value
| Type | Description |
| NodeList | A collection of descendant elements that matches the CSS selector(s). The NodeList is static (changes in the DOM has NO effect in the collection). Throws a SYNTAX_ERR exception if the specified selector(s) is invalid. |
More Examples
Example
Set the background color of the first <p> element in "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
list[0].style.backgroundColor = "red";
Try it Yourself »
Example
Set the background of the first <p> element in "myDIV" with class="example":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p.example");
list[0].style.backgroundColor = "red"
Try it Yourself »
Example
How many elements with class="example" are there in "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example")
let len = list.length;
Try it Yourself »
Example
Set the background of all elements with class="example" in "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
Try it Yourself »
Example
Set the background color of all <p> elements in "myDIV":
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
Try it Yourself »
Example
Set the border style of all <a> elements in "myDIV" that have a "target" attribute:
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("a[target]");
for (let i = 0; i < list.length; i++) {
list[i].style.border = "10px solid red";
}
Try it Yourself »
Example
Set the background color of all <h3> and <span> elements in a document:
const list = document.querySelectorAll("h3, span");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
Try it Yourself »
Browser Support
element.querySelectorAll() is a DOM Level 3 (2004) feature.
It is fully supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 11 |