使用document.querySelector()能否获取多个ID？若无替代方案是什么？

Great question! Let’s break this down clearly, including why the direct approach doesn’t work and what to use instead.

Why querySelector() Isn’t the Right Tool for Multiple IDs #

The document.querySelector() method is designed to return only the first element that matches your CSS selector. Even if you pass a selector with multiple IDs separated by commas (like #div1, #div2, #div3), it will only give you the first matching element it finds in the DOM.

Example of this limitation:

// This will only return the element with id="div1" (if it appears first in the DOM)
const singleElement = document.querySelector('#div1, #div2, #div3');

Alternative Solutions to Get Multiple IDs #

If you need to fetch all elements with specific IDs, here are your go-to options:

1. Use document.querySelectorAll() #

This is the direct counterpart to querySelector() and returns a NodeList containing all elements that match your selector. It’s perfect for grabbing multiple IDs at once:

// Returns a NodeList with #div1, #div2, #div3 (all that exist in the DOM)
const elements = document.querySelectorAll('#div1, #div2, #div3');

// Loop through the NodeList to work with each element
elements.forEach(element => {
  console.log(element);
  // Add your logic here (e.g., style changes, event listeners)
});

2. Fetch IDs Individually with document.getElementById() #

If you prefer working with individual Element objects (instead of a NodeList), you can retrieve each ID one by one. This also lets you easily handle cases where an ID might not exist in the DOM:

const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');
const div3 = document.getElementById('div3');

// Collect valid elements into an array (filter out null values)
const validElements = [div1, div2, div3].filter(el => el !== null);

3. Convert NodeList to an Array (For More Flexibility) #

Modern browsers support forEach() on NodeLists, but if you want to use array-specific methods like map or reduce, convert the NodeList to an array:

// Option 1: Use Array.from()
const elementsArray = Array.from(document.querySelectorAll('#div1, #div2, #div3'));

// Option 2: Use the spread operator
const elementsArray = [...document.querySelectorAll('#div1, #div2, #div3')];

Quick Best Practice Note #

Remember that HTML standards require IDs to be unique per page. If you’re regularly selecting multiple elements with similar traits, consider using classes instead—they’re designed for grouping elements and will make your code more maintainable!

内容的提问来源于stack exchange，提问作者Philip