querySelectorAll()

What is querySelectorAll?

document.querySelectorAll() returns a static NodeList of all elements that match a specified CSS selector(s).

Basic Example

// Select all paragraphs
const paragraphs = document.querySelectorAll("p");

paragraphs.forEach(p => {
  console.log(p.textContent);
});
      

Using CSS Selectors

You can use any valid CSS selector:

// By class
document.querySelectorAll(".item");

// By ID inside a container
document.querySelectorAll("#menu a");

// Nested selectors
document.querySelectorAll("div.card h2");
      

Key Features

• Returns a static NodeList (not live)
• Supports full CSS selector syntax
• Can be looped with forEach()
• Works on document or any element

Live vs Static Difference

Unlike getElementsByClassName(), the NodeList returned by querySelectorAll() does not automatically update when the DOM changes.

Learn More

Practice using selectors in your browser DevTools and experiment with real DOM structures. Mastering querySelectorAll() is essential for modern frontend development.