Javascript - Chercher des éléments par IDs

Bonjour à tous,

Cet article s'adresse aux gens qui se demandent comment chercher des éléments en fonction de leur ID. C'est à dire quand celui-ci match une expression régulière.

Problème

Vous connaissez déjà tous la méthode getElementById(id) qui permet de renvoyer l'unique élément possédant cet ID (puisqu'un ID est nécessairement unique).

Vous connaissez également la méthode getElementsByTagName(tagName) qui renvoie un tableau contenant tous les éléments possédant le tag indiqué.

Et bien il existe certains cas où ces deux solutions ne suffisent pas.

Par exemple : vous avez des carrés sur votre site ; quand l'utilisateur clique sur un bouton, chaque carré change de taille, chacun avec une nouvelle taille qui lui est propre. Vous avez donc besoin d'avoir la liste de leurs IDs pour les gérer. Deux solutions s'offrent à vous :

• Chaque fois que vous ajoutez un carré, vous incrémentez manuellement une liste des IDs.
• Vous possédez une boucle qui parcours le document à la recherche des carrés, ainsi la méthode s'adapte directement au code. Et c'est là que le bât blesse ! Comment récupérer tous les IDs qui se ressemble, sachant que vous ne connaissez pas le nombre exact de carrés (donc pas de boucle) et que vous ne savez pas où ils se trouvent dans la page (donc pas de while) !?

Solution

Je vous propose ici une méthode nommée getElementByRegexId. Cette méthode prend deux paramètres, à savoir :

• L'expression régulière que doivent matcher les IDs.
• [Fac] Le nom de la balise sur laquelle chercher. Si rien n'est indiqué, on cherche sur toutes les balises.

Le principe est simple : on parcours les éléments récupérés via getElementsByTagName, on teste leur ID et s'il matche l'expression régulière, on l'ajoute à un tableau.

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;  
  }

Exemples d'utilisation :

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

Voilà, libre à vous de l'améliorer, d'ajouter des options etc etc...
J'espère en tous cas que cela vous aura été utile ! Ce document intitulé « Javascript - Chercher des éléments par IDs » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.