HTML DOM querySelectorAll() Method

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

❮ Previous ❮ Element Object Reference Next ❯