Javascript - Search elements by their IDs

Ask a question

This tip will show you how to search for elements based on their ID. That is when the latter match a regular expression.

Issue


You already know the getElementById(id) method that is used to return the element related to a particular ID (since ID is necessarily unique) and the getElementsByTagName(tagName) method that returns an array containing all elements with the mentioned tag.

Well there are some cases where these solutions are not enough.

For example: you have squares on your site: when the user clicks a button, each square changes size, each with a new size of its own. So you'll need to have a list of their IDs to manage them. Two solutions are available:
Each time you add a square, you manually increment a list of IDs.
You have a loop that search the document to find the squares, thus the method fits directly to the code. But how to retrieve all the IDs, knowing that you do not know the exact number of squares (not loop) and you do not know where they are in the page ?

Solution


We shall be using the getElementByRegexId method. This method has two parameters, namely:
The regular expression that matches the IDs.
[Fac] The name of the tag to be searched. If nothing is indicated, then all the tags shall be taken into consideration.

The principle is simple: we search through the elements retrieved by getElementsByTagName, test the IDs and anything that match the regular expression, is added to a table:

function getElementsByRegexId(regexpParam, tagParam) {  
    // Si aucun nom de balise n'est spécifié, on cherche sur toutes les balises  
   tagParam = (tagParam === undefined) ? '*' : tagParam;  
   var elementsTable = new Array();  
   for(var i=0 ; i<document.getElementsByTagName(tagParam).length ; i++) {  
    if(document.getElementsByTagName(tagParam)[i].id && document.getElementsByTagName(tagParam)[i].id.match(regexpParam)) {  
     elementsTable.push(document.getElementsByTagName(tagParam)[i]);  
    }  
   }  
   return elementsTable;  
  }


Example:
var divCarres = getElementsByRegexId(/_carre.*/, "div");  
var tousLesCarres = getElementsByRegexId(/_carre.*/);



Jean-François Pillou

CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jeff Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.

Learn more about the CCM team