Skip to main content

How to Select Elements by Multiple IDs in JavaScript

While document.getElementById() is perfect for selecting a single, unique element, you often need to select a specific group of elements by their IDs. The document.querySelectorAll() method provides a powerful and flexible way to do this by accepting a CSS selector that can target multiple IDs at once.

This guide will teach you how to use querySelectorAll() to select elements with multiple IDs, both with a static selector string and by dynamically generating a selector from an array of IDs.

The Core Method: document.querySelectorAll() with a Group Selector​

The key to selecting multiple elements by their ID is to use a CSS group selector, which is a list of selectors separated by commas.

Problem: you have several elements on a page, each with a unique ID, and you want to select a specific subset of them.

<div id="box-1">Box 1</div>
<p id="message">A message</p>
<div id="box-2">Box 2</div>
<span id="label">A label</span>
<div id="box-3">Box 3</div>

You want to select only the elements with the IDs box-1, box-2, and box-3.

Solution:

// Provide a comma-separated list of ID selectors.
let selector = '#box-1, #box-2, #box-3';
let elements = document.querySelectorAll(selector);

console.log(elements);
// Output: NodeList(3) [div#box-1, div#box-2, div#box-3]

The "Array of IDs" Scenario (Very Common)​

In real-world applications, you often have your list of target IDs in an array. To use them with querySelectorAll(), you must first convert this array into a single, comma-separated selector string.

Solution:

  1. Use Array.prototype.map() to transform each ID in the array into a valid CSS ID selector (by prepending a #).
  2. Use Array.prototype.join() to combine these selectors into a single string.
let idsToSelect = ['box-1', 'box-2', 'box-3'];

// 1. Map each ID to a CSS selector (e.g., 'box-1' -> '#box-1')
let selectors = idsToSelect.map(id => `#${id}`);
// selectors is now ['#box-1', '#box-2', '#box-3']

// 2. Join the array into a single, comma-separated string
let selectorString = selectors.join(', ');
// selectorString is now "#box-1, #box-2, #box-3"

// 3. Use the generated string to select the elements
let elements = document.querySelectorAll(selectorString);

console.log(elements.length); // Output: 3
note

This is the recommended best practice for selecting elements from a dynamic list of IDs.

How the Group Selector Works​

The comma in a CSS selector acts as an "OR" operator. The selector #box-1, #box-2, #box-3 tells the browser's selection engine: "Find all elements that have an ID of box-1, OR an ID of box-2, OR an ID of box-3."

  • Each part of the comma-separated list is a full, independent selector.
  • The # prefix is the CSS syntax for an ID selector.

Working with the Returned NodeList​

The querySelectorAll() method returns a NodeList, which is a collection of the matched elements. It is similar to an array, but not identical.

Iterating Over the NodeList​

You can iterate over a NodeList directly with forEach() or a for...of loop.

let elements = document.querySelectorAll('#box-1, #box-2');

elements.forEach(element => {
  element.style.backgroundColor = 'salmon';
});

Converting to an Array​

If you need to use array-specific methods like map() or filter() (that are not on the NodeList prototype), you can easily convert the NodeList to a true array.

// Using Array.from() (Recommended)
let elementsArray = Array.from(document.querySelectorAll('.box'));

// Using Spread Syntax (...)
let elementsArray2 = [...document.querySelectorAll('.box')];

console.log(Array.isArray(elementsArray)); // Output: true

Conclusion​

The document.querySelectorAll() method provides a powerful and flexible way to select multiple elements by their IDs.

  • To select a static list of IDs, use a comma-separated string of ID selectors: querySelectorAll('#id1, #id2').
  • For a dynamic list of IDs stored in an array, the recommended best practice is to programmatically generate the selector string using map() and join(): ids.map(id => `#${id}`).join(', ').

Table of Contents