Skip to main content

How to Select Multiple Elements with querySelectorAll in JavaScript

A frequent task in DOM manipulation is to select a group of elements that don't all share the same class or tag. For example, you might want to select all <h2> tags and all elements with a class of .sub-heading. The document.querySelectorAll() method is the perfect tool for this, as it accepts a group of selectors.

This guide will teach you how to use comma-separated CSS selectors with querySelectorAll() to select multiple, different elements at once and how to iterate over the resulting collection.

The Core Method: querySelectorAll() with a Selector List​

The querySelectorAll() method is a powerful and flexible way to select DOM elements. Its key feature for this task is that it accepts a string containing one or more comma-separated CSS selectors. It will return a static NodeList containing all elements in the document that match any of the specified selectors.

The syntax:

document.querySelectorAll('selector1, selector2, selector3')

How the Selector List Works​

In CSS, a comma is a selector list combinator. It allows you to apply the same styles to multiple, unrelated selectors. The querySelectorAll() method uses this exact same syntax.

The command document.querySelectorAll('div, .my-class, #my-id') tells the browser: "Find me all <div> elements, AND all elements with a class of my-class, AND the element with an ID of my-id, and return them all in a single list."

The order of the elements in the returned NodeList is the order in which they appear in the document.

Practical Examples​

Let's use a sample HTML structure to see how this works.

HTML:

<h2 class="main-heading">Main Title</h2>
<p>Some text here.</p>
<div class="card">A card</div>
<h3 class="sub-heading">Subtitle 1</h3>
<p>More text.</p>
<h3 class="sub-heading">Subtitle 2</h3>
<button id="submit-btn">Submit</button>

Example 1: Selecting by Tag Name and Class​

This selects all <h2> elements and all elements with the class .sub-heading.

let headings = document.querySelectorAll('h2, .sub-heading');

console.log(headings);
// # Output: NodeList(3) [ h2.main-heading, h3.sub-heading, h3.sub-heading ]

Example 2: Selecting by Class and ID​

This selects all elements with the class .card and the element with the ID #submit-btn.

let interactiveElements = document.querySelectorAll('.card, #submit-btn');

console.log(interactiveElements);
// # Output: NodeList(2) [ div.card, button#submit-btn ]

How to Iterate Over the NodeList​

The querySelectorAll() method returns a NodeList, which is an array-like collection of elements. In all modern browsers, the NodeList has a built-in forEach() method, which is the recommended way to iterate over the selected elements.

let headings = document.querySelectorAll('h2, .sub-heading');

// Use forEach to iterate over the NodeList
headings.forEach(heading => {
  // Apply a style to each selected element
  heading.style.color = 'blue';
});

For older browser compatibility, you could convert the NodeList to a true array using Array.from(), but this is generally no longer necessary.

// This is an older pattern, not usually needed anymore
let headingsArray = Array.from(headings);
headingsArray.forEach(heading => { /* ... */ });

Conclusion​

Using querySelectorAll() with a comma-separated selector list is the standard and most powerful way to select a group of disparate elements from the DOM.

  • The key is to provide a string of CSS selectors separated by commas.
  • The method will return a NodeList containing every element that matches any of the provided selectors.
  • You can then iterate over this NodeList using the built-in .forEach() method to apply changes to all the selected elements.

Table of Contents