JavaScript .querySelectorAll()

In JavaScript, the .querySelectorAll() method under the document object returns a static (not live) NodeList of all elements that match the given group of selectors.

Syntax

document.querySelectorAll(selectors);

• selectors: Represents a string containing one or more CSS selectors used to match elements in the document. It follows the same rules as CSS selectors and can include:
  • Type selectors (div, p, span)
  • Class selectors (.class-name)
  • ID selectors (#id-name)
  • Attribute selectors ([type="text"], [disabled])
  • Combinations (div p, .container > p, ul > li:first-child)

Examples

Example 1

In this example, a NodeList of all <p> elements in the document is obtained:

const matches = document.querySelectorAll('p');

Copy to clipboard
Copy to clipboard

Example 2

The following example returns a list of all <div> elements in the document with a class of either note or alert:

const matches = document.querySelectorAll('div.note, div.alert');

Copy to clipboard
Copy to clipboard

Example 3

In this example, a list of <p> elements is obtained, whose immediate parent is a <div> with the class highlighted, and which are inside a container with the ID test:

const container = document.querySelector('#test');
const matches = container.querySelectorAll('div.highlighted > p');

Copy to clipboard
Copy to clipboard