JavaScriptDomBeginner

document.querySelectorAll()

Selects all matching elements and returns a static NodeList.

Review the syntaxStudy the examplesOpen the coding app
document.querySelectorAll(cssSelector)
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Selects all matching elements and returns a static NodeList.

The document.querySelectorAll() method returns a static (non-live) NodeList representing a list of the document's elements that match the specified group of selectors. Unlike getElementsByTagName, changes in the DOM do not reflect in a previously returned NodeList. While modern browsers support NodeList.prototype.forEach(), the collection lacks array methods like map(), filter(), or reduce(). For high-performance scenarios, be aware that querySelectorAll() performs a depth-first pre-order traversal of the document's nodes. It supports complex CSS selectors including attribute selectors and pseudo-classes, but cannot select pseudo-elements like ::after. If no elements match, it returns an empty NodeList (length 0), never null.

Quick reference

Syntax

document.querySelectorAll(cssSelector)

Inputs

Parameters

cssSelectorstring · CSS selector for multiple matches.

See it in practice

Examples

1

Iterating over matches

const buttons = document.querySelectorAll('button.active');
buttons.forEach(function(btn) {
  btn.style.backgroundColor = 'blue';
});
Output:
undefined (Updates background color of all matching buttons)

Selects all button elements with the class 'active' and uses the built-in forEach method of NodeList to apply styles.

2

Converting to Array for filtering

var inputs = document.querySelectorAll('input');
var textInputs = Array.from(inputs).filter(function(input) {
  return input.type === 'text';
});
console.log('Text input count:', textInputs.length);
Output:
Text input count: [number of text inputs]

Demonstrates converting a static NodeList into a functional array to use the filter method. Note: Array.from is not supported in IE.

3

Complex CSS selectors

const nestedLinks = document.querySelectorAll('nav > ul li a[href^="https"]');
console.log('Secure links found:', nestedLinks.length);
Output:
Secure links found: [count]

Uses advanced CSS selectors to find all anchor tags that are children of a list within a nav element and have an href attribute starting with https.

Debug faster

Common Errors

1

TypeError

Cause: Attempting to call array-specific methods like .map(), .filter(), or .reduce() directly on the returned NodeList.

Fix: Convert the NodeList to a true Array using Array.from(nodeList) or the spread operator [...nodeList] before calling array methods.

document.querySelectorAll('div').map(d => d.id); // Throws TypeError
2

SyntaxError

Cause: Passing an invalid CSS selector string to the method, such as one starting with a number or containing unescaped special characters.

Fix: Ensure the string is a valid CSS selector. Use CSS.escape() if selecting elements based on dynamic data containing special characters.

document.querySelectorAll('.123-id'); // Throws SyntaxError
3

LogicError

Cause: Expecting the returned collection to update automatically when the DOM changes (assuming it is a live collection).

Fix: Re-run querySelectorAll() after DOM manipulations if you need an updated list of elements.

const items = document.querySelectorAll('.item');
// ... add a new .item to the DOM ...
console.log(items.length); // Still shows the old count

Runtime support

Compatibility

BrowserAll modern browsersModern DOM

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Selects all matching elements and returns a static NodeList.

cssSelector: CSS selector for multiple matches.

TypeError: Convert the NodeList to a true Array using Array.from(nodeList) or the spread operator [...nodeList] before calling array methods. SyntaxError: Ensure the string is a valid CSS selector. Use CSS.escape() if selecting elements based on dynamic data containing special characters. LogicError: Re-run querySelectorAll() after DOM manipulations if you need an updated list of elements.