JavaScript Document querySelectorAll() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word QUERYSELECTORALL

Definition

document.querySelectorAll(selectors) returns a static (not live) NodeList of every Element that matches a CSS selector (or group of selectors). Matches are in document order. No matches → an empty list, not null.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.querySelectorAll. Start with this line.

JavaScript
document.querySelectorAll(selectors)
CallWhat it does
document.querySelectorAll(selectors)Primary signature.
document.querySelectorAll(...)Call with the arguments your case needs.

Built into the browser. Call querySelectorAll(...) on document — no import required.

Library declarations
JavaScript
document.querySelectorAll(selectors)

Parameters

ParameterDescription
selectorsRequired. Valid CSS selector string

Return Value

Return ValueDescription
*Static NodeList (empty if none)

JavaScript Examples

Example 1 — All <p> Elements

MDN-style: collect every paragraph in the document.

JavaScript
const matches = document.querySelectorAll("p");
console.log(matches.length);
// number of <p> elements

console.log(matches[0] ? matches[0].textContent : "(none)");
Try It Yourself

How It Works

  1. Match a tag. "p" selects every paragraph element.
  2. Get a NodeList. Use length to see how many matched.
  3. Index like an array. matches[0] is the first paragraph in document order.
  4. Empty is safe. If none match, length is 0 — not null.

Example 2 — Multiple Selectors with a Comma

Match any of several selectors in one call.

JavaScript
const matches = document.querySelectorAll("div.note, div.alert");
console.log(matches.length);

matches.forEach((el) => {
  console.log(el.className);
});
Try It Yourself

How It Works

  1. Combine with a comma. An element matches if it fits any of the listed selectors.
  2. Collect both kinds. Notes and alerts land in one NodeList.
  3. Stay in document order. Earlier nodes appear before later ones.
  4. Loop the list. forEach visits each matched element once.

Example 3 — Loop Matches with forEach

Read every match; an empty list simply runs zero times.

JavaScript
const items = document.querySelectorAll("li[data-active='1']");

items.forEach((li) => {
  console.log(li.textContent);
});

console.log("count:", items.length);
Try It Yourself

How It Works

  1. Use an attribute selector. li[data-active='1'] keeps only active items.
  2. Iterate with forEach. Each callback receives one element.
  3. Log text. Shows which items matched.
  4. Check length. Confirms how many were found (or 0 if none).
Compatibility

Browser Support

Document.querySelectorAll() is a browser DOM API marked Baseline Widely available on MDN (across browsers since July 2015).

✓ Baseline Widely available

Document.querySelectorAll()

Static NodeList of all CSS matches — everyday multi-element DOM lookup.

Baseline Widely available
Google Chrome 1+
Yes
Microsoft Edge 12+
Yes
Mozilla Firefox 3.5+
Yes
Apple Safari 3.1+
Yes
Opera 10+
Yes
Internet Explorer 9+ (8 partial)
Yes
querySelectorAll() Excellent in browsers

Bottom line: Safe for virtually all browsers you ship to. See the MDN Document.querySelectorAll() reference.

Frequently Asked Questions

It returns a static (not live) NodeList of every Element in the document that matches the given CSS selector or group of selectors.
No. MDN marks Document.querySelectorAll() as Baseline Widely available (across browsers since July 2015). It is not Deprecated, Experimental, or Non-standard.
You get an empty NodeList (length 0), not null. forEach still works — it simply runs zero times.
It is static (non-live). It does not automatically update when the DOM changes after the call.
querySelector() returns the first matching Element or null. querySelectorAll() returns every match in a NodeList (empty when none).
A SyntaxError DOMException is thrown if selectors is not a valid CSS selector string. Escape special class/id values with CSS.escape().

Next: releaseCapture()

Learn the legacy Document method that releases mouse capture.

releaseCapture() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

17 people found this page helpful

JavaScript Document querySelector() Method JavaScript Document releaseCapture() Method