HTML DOM Document querySelectorAll()

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
Object	A NodeList object with the elements that matches the CSS selector(s). If no matches are found, an empty NodeList object is returned.

Add a background color to the first <p> element:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Add a background color to the first <p> element with class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Number of elements with class="example":

let numb = document.querySelectorAll(".example").length;

Set the background color of all elements with class="example":

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}

Set the background color of all <p> elements:

let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}

Set the border of all <a> elements with a "target" attribute:

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}

Set the background color of every <p> element where the parent is a <div> element:

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}

Set the background color of all <h3> and <span> elements:

const nodeList = document.querySelectorAll("h3, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}

document.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