HTML DOM querySelectorAll() method

HTML DOM Document Object

querySelectorAll()Returns a list of elements in the document that match the specified selector group (uses depth-first pre-order traversal of the document's nodes). The returned object is NodeList .

The elements in the returned NodeList are sorted in the order they appear in the source code.

The returned NodeList can be accessed by index. The index starts from 0.

NodeList is a static collection, which means changes in the DOM are not effective on this collection.

Use the length property of NodeList to determine the number of elements with the specified selector, and then you can iterate over all elements to extract the required information.

Syntax:

document.querySelectorAll(selectors)

document.querySelectorAll("div");

Browser compatibility

The numbers in the table specify the first browser version that fully supports the querySelectorAll() method:

Parameter value

Technical details

More Examples

Get all elements with class="demo":

document.querySelectorAll(".demo");

This example returns a list of all <div> elements in the document with the class 'note':

document.querySelectorAll("div.note");

Set the background color of all <h1>, <p> and <div> element background color:

document.querySelectorAll("h1,　p,　div");

Related References

CSS Tutorial:CSS Selector

CSS Reference:CSS #idSelector

CSS Reference: CSS .class Selector

DOM Document querySelector() Methods

DOM Document getElementsByClassName() Methods

DOM Document getElementsByTagName() Methods

HTML DOM Document Object