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

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(', ').