Sometimes, we want to use document.getElementById with Multiple IDs in JavaScript

In this article, we’ll look at how to use document.getElementById with Multiple IDs in JavaScript

Use document.getElementById with Multiple IDs in JavaScript

To use document.getElementById with Multiple IDs in JavaScript, we can replace document.getElementById with document.querySelector.

For instance, if we have:

<div id='myCircle1'>
  circle
</div>
<div id='myCircle2'>
  circle
</div>
<div id='myCircle3'>
  circle
</div>
<div id='myCircle4'>
  circle
</div>

Then we write:

const circles = document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4")
console.log(circles)

We call document.querySelectorAll with a string that has the selector of all the elements separated by a comma.

And then we assign the returned result to circles.

Therefore, circles is a node list with the 4 elements we selected.

Conclusion

To use document.getElementById with Multiple IDs in JavaScript, we can replace document.getElementById with document.querySelector.