HTML DOM Element querySelectorAll() Method

Definition and Usage

querySelectorAll() The method returns a collection of child elements that match the specified CSS selector, as a static NodeList object.

NodeList

NodeList is a node collection (list) that is a class array.

Nodes in the list can be accessed by index (index). The index starts from 0.

The length property can return the number of nodes in the list.

See also:

Reference Manual:

classList property

className property

querySelector() method

getElementsByTagName() method

getElementsByClassName() method

HTML DOM Style Object

Tutorial:

CSS Syntax

CSS Selectors

CSS Selectors Reference Manual

Example

Example 1

Set the background color of the first element with class="example" within the <div> element:

// Get the element with id="myDIV" (div), then get all elements with class="example" within div
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// Set the background color of the first element with class="example" (index 0) within div
x[0].style.backgroundColor = "red";

Try It Yourself

Tip:More examples are provided below the page.

Syntax

element.querySelectorAll(cssSelectors)

Parameters

Parameters Description
cssSelectors

Required. String. Specifies one or more CSS selectors to match elements.

CSS selectors are used to select HTML elements based on id, class, type, attributes, attribute values, etc.

For multiple selectors, separate each selector with a comma.

Tip:For a list of all CSS selectors, please see our CSS Selectors Reference Manual.

Technical Details

Return value:

NodeList object represents all descendant elements of the current element that match the specified CSS selector.

NodeList is a static collection, which means changes in the DOM do not affect the collection.

Note:If the specified selector is invalid, a SYNTAX_ERR exception is thrown
DOM Version: Selectors Level 1 Document Object

More examples

Example 2

Get all <p> elements within the <div> element and set the background color of the first <p> element (index 0):

// Get the element with id="myDIV" (div), and then get all p elements within the div
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Set the background color of the first <p> element (index 0) within div
x[0].style.backgroundColor = "red";

Try It Yourself

Example 3

Get all <p> elements with class="example" within <div> and set the background of the first <p> element:

// Get the element with id="myDIV" (div), and then get all p elements with class="example" within the div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Set the background color of the first <p> element with class="example" within the div (index 0)
x[0].style.backgroundColor = "red";

Try It Yourself

Example 4

Find out how many elements with class="example" are within the <div> element (using the length property of the NodeList object):

/* Get the element with id="myDIV" (div), and then get all p elements with class="example" within the div, return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Try It Yourself

Example 5

Set the background color for all elements with class="example" within the <div> element:

// Get the element with id="myDIV" (div), and then get all elements with class="example" within the div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Create a for loop and set the background color of all elements with class="example" within the div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Try It Yourself

Example 6

Set the background color for all <p> elements within the <div> element:

// Get the element with id="myDIV" (div), and then get all p elements within the div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Create a for loop and set the background color of all p elements within the div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Try It Yourself

Example 7

Set the border style for all <a> elements with the target attribute within the <div> element:

// Get the element with id="myDIV" (div), and then get all <a> elements with the "target" attribute within the div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Create a for loop and set the border of all <a> elements with the target attribute within the div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Try It Yourself

Example 8

Set the background color of all <h2>, <div>, and <span> elements within the <div>:

// Get the element with id="myDIV" (div), then get all <h2>, <div>, and <span> elements within the <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Create a for loop and set the background color of all <h2>, <div>, and <span> elements within the <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Try It Yourself

Browser Support

The numbers in the table indicate the first browser version that fully supports this method.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Note:Internet Explorer 8 supports CSS2 selectors. IE9 and higher versions also support CSS3.

Related Pages

CSS Tutorial:CSS Selectors

CSS Reference Manual:CSS Selectors Reference Manual

JavaScript Tutorial:JavaScript HTML DOM Node List

JavaScript Reference Manual:element.querySelector()

HTML DOM Reference Manual:document.querySelectorAll()