Select elements by multiple IDs using JS is one of the most important skills when you work with element selection. To do that you can use for loop with getElementById() or use querySelectorAll() method. Let’s see the specific steps in this article.
Select elements by multiple IDs using JS
Using for loop with getElementById()
This function returns an element object representing the element whose ‘id’ attribute matches the specified string.
Syntax:
getElementById(id)
Parameter:
- id: The ID of the element to search for.
You can use the getElementById() function to get the first found element that matches with the id provided. To select elements by a list (or array) of ids, you can use a for loop to iterate through all the ids given to search for the element using this method and then push the element to a new array.
<html>
<body>
<p id="learn">LEARN</p>
<p id="share">SHARE</p>
<p id="it">IT</p>
</body>
</html>let ids = ['learn','share','it'];
let array = [];
for (id of ids)
array.push(document.getElementById(id));
console.log(array);Output:
[p#learn, p#share, p#it]Using querySelectorAll()
The method returns all elements which match a CSS selector.
Syntax:
querySelectorAll(selector)
Parameter:
- selector: A string that contains one or more CSS selectors to match against.
However, this method returns a static NodeList which is a collection of document nodes. This is different from the Array (HTMLCollection) when using the previous solution. Because nodes in the NodeList returned cannot be changed directly, hence we also need to convert the NodeList to a HTMLCollection using Array.from().
Syntax:
Array.from(iterable)
Parameter:
- iterable: An iterable (array-like) object such as a list or NodeList, a set or map to be converted to an array.
Example:
let res = Array.from(document.querySelectorAll('#learn,#share,#it'));
console.log(res);Output:
[p#learn, p#share, p#it]
The above example points out the ids we want to find the elements are ‘learn’, ‘share’ and ‘it’. The Array.from() will help us to convert the NodeList of the querrySelectorAll method to a HTML Collection. In fact, this solution is actually used by most programmers. Anyway, if you have a lot of ids to search for (and those ids are inside a list or array) then you can use a join() method to do the job.
Syntax:
join(split)
Parameter:
- split: A string which acts as a separator between these elements in an array when converting to a string.
Example:
let ids = ['learn','share','it'];
let cssSelector = '#'+ids.join(",#");
let res = Array.from(document.querySelectorAll(cssSelector));
console.log(res);Output:
[p#learn, p#share, p#it]The logic behind the second statement in the example above is very easy to understand. Any selector which selects an id will need a # character before the id. So we should join elements with a ‘,#’ delimiter to result in a valid CSS selector. By the way, remember to add one # character to the beginning of the CSS selector because the first element does not have any separator character in front of it.
Summary
We have learned how to select elements by multiple IDs using JS with two different approaches. Hopefully through the help of our instructions in this tutorial and other ones, you can easily achieve the task.
Maybe you are interested:
- Remove CSS Style Property from an Element using JavaScript
- Solution To Create An Element With ID Attribute Using JS
- Add an ID attribute to an Element using JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
