JavaScript Element querySelectorAll() Method

What You’ll Learn

Element.querySelectorAll() is an instance method that returns a static NodeList of every descendant matching a CSS selector—in document order. Learn MDN list patterns, forEach loops, :scope scoping, attribute selectors, Array.from(), and five try-it labs aligned with MDN.

Introduction

Sometimes you need every match—all highlighted list items, every input in a form, or each card with a certain class. querySelector() only gives you the first result; querySelectorAll() collects them all.

querySelectorAll(selectors) returns a static (non-live) NodeList of matching descendant elements (MDN). Results stay in document order: parents before children, earlier siblings before later ones.

This page is part of JavaScript Element. Pair with querySelector() when you only need the first match, and matches() to test a single element.

Understanding the querySelectorAll() Method

Calling container.querySelectorAll(selectors) searches descendants of container and returns every match in a NodeList.

• It is an instance method on Element (MDN).
• Returns a static NodeList—it does not update when the DOM changes (MDN).
• Elements are in document order (MDN).
• Empty NodeList when nothing matches—never null (MDN).
• MDN: selectors apply to the whole document; use :scope at the start to restrict scope.
• MDN: if selectors include a CSS pseudo-element, the returned list is always empty.
• Throws SyntaxError if selectors is not valid CSS (MDN).

📝 Syntax

General form of Element.querySelectorAll (MDN):

querySelectorAll(selectors)

Parameters

Return value

Exceptions

• SyntaxError DOMException — thrown if selectors is not a valid CSS selector string (MDN).

Common patterns

// All paragraphs inside myBox (MDN)
const matches = myBox.querySelectorAll("p");

// Multiple selectors (MDN)
const notes = myBox.querySelectorAll("div.note, div.alert");

// Attribute selector in a container (MDN)
const active = container.querySelectorAll("li[data-active='1']");

// Loop with forEach (MDN)
highlightedItems.forEach((item) => item.classList.remove("highlighted"));

// Convert to array for map/filter
const arr = Array.from(list);

// Scope to caller with :scope (MDN)
subject.querySelectorAll(":scope #inner");

Examples Gallery

Examples follow MDN Element.querySelectorAll() patterns. Use View Output or Try It Yourself for each case.

const myBox = document.getElementById("myBox");
const matches = myBox.querySelectorAll("p");

console.log(matches.length); // 3
console.log(matches[0].textContent); // "First"

3
First

const myBox = document.getElementById("myBox");
const matches = myBox.querySelectorAll("div.note, div.alert");

console.log(matches.length); // 2

2

const container = document.querySelector("#user-list");
const matches = container.querySelectorAll("li[data-active='1']");

console.log(matches.length);
matches.forEach((li) => console.log(li.textContent));

2
Alice
Bob

const userList = document.getElementById("user-list");
const highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach((userItem) => {
  userItem.classList.remove("highlighted");
});

console.log(userList.querySelectorAll(".highlighted").length); // 0

0

const subject = document.querySelector("#subject");

const withoutScope = subject.querySelectorAll("#outer #inner");
const withScope = subject.querySelectorAll(":scope #outer #inner");

console.log(withoutScope.length); // 1 (MDN demo)
console.log(withScope.length);    // 0

1
0

🚀 Common Use Cases

• Collecting every highlighted row in a table or list (MDN forEach pattern).
• Batch-updating all elements with a class inside a component.
• Attribute filters: container.querySelectorAll("[data-name*='funnel']") (MDN).
• Form validation across all invalid inputs in a section.
• Scoped queries with :scope when document-wide matching is too broad (MDN).
• Converting results to arrays: Array.from(nodeList) for map/filter.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• Returns a static NodeList—not live (MDN).
• Empty NodeList when nothing matches—check length, not null.
• MDN: pseudo-element selectors always return an empty list.
• Use querySelector() when you only need the first match.
• Related: querySelector(), matches(), closest(), JavaScript hub.

💡 Best Practices