HTML DOM Document querySelectorAll() Method

Definition and usage

querySelectorAll() The method returns all elements that match the CSS selector.

querySelectorAll() The method returns a NodeList.

If the selector is invalid querySelectorAll() The method will throw SYNTAX_ERR Exception.

Instance

Example 1

Select all elements with class="example":

document.querySelectorAll(".example");

Try it yourself

Example 2

Add background color to the first <p> element:

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

Try it yourself

Example 3

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

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

Try it yourself

Example 4

Number of elements with class="example":

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

Try it yourself

Example 5

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";
}

Try it yourself

Example 6

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";
}

Try it yourself

Example 7

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

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

Try it yourself

Example 8

Set the background color of each <p> element that is a child of the <div> element:

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

Try it yourself

Example 9

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

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

Try it yourself

Syntax

document.querySelectorAll(CSSselectors)

Parameter

Parameter Description
CSSselectors

Required. One or more CSS selectors.

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

For a complete list, please visit our CSS Selector Reference Manual.

For multiple selectors, separate each selector with a comma (see the example above).

Return value

Type Description
Object

A NodeList object containing elements that match the CSS selector.

If no match is found, an empty NodeList object is returned.

The difference between HTMLCollection and NodeList

NodeList and HTMLcollection very similar.

Both are similar collections (lists) of nodes (elements) extracted from the document. Nodes can be accessed by index (index). The index starts from 0.

Both have length a property that returns the number of elements in the list (collection).

The HTMLCollection isDocument ElementSet.

NodeList isDocument NodeSet of (element nodes, attribute nodes, and text nodes).

HTMLCollection items can be accessed by their name, id, or index number.

NodeList items can only be accessed by their index number.

HTMLCollections are alwaysLiveSet.

For example, if an <li> element is added to the list in the DOM, the list in the HTMLCollection will also change.

NodeLists are usuallyStaticSet.

For example, if an <li> element is added to the list in the DOM, the list in the NodeList will not change.

getElementsByClassName() and getElementsByTagName() Methods all return live HTMLCollections.

querySelectorAll() Methods return a static NodeList.

childNodes Properties return a live NodeList.

Browser Support

document.querySelectorAll() It is a DOM Level 3 (2004) feature.

All Browsers Support It:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Related Pages

Tutorial:

CSS Selectors

CSS Selector Reference Manual

JavaScript NodeList Tutorial

querySelector Method:

Element querySelector() Method

Element querySelectorAll() Method

Document querySelector() Method

Document querySelectorAll() Method

Get Element Method:

Document getElementById() Method

Document getElementsByTagName() Method

Document getElementsByClassName() Method