Javascript - Rechercher des éléments par leur identifiant

Cette astuce vous montrera comment rechercher des éléments en fonction de leur ID. C'est à ce moment que ces derniers correspondent à une expression régulière.

Problème

Vous connaissez déjà la méthode getElementById (id) utilisée pour renvoyer l'élément lié à un ID particulier (car ID est nécessairement unique) et la méthode getElementsByTagName (tagName) qui renvoie un tableau contenant tous les éléments avec la balise mentionnée.

Dans certains cas, ces solutions ne suffisent pas.

Par exemple: vous avez des carrés sur votre site: lorsque l'utilisateur clique sur un bouton, chaque carré change de taille, chacun avec une nouvelle taille. Vous aurez donc besoin d'une liste de leurs identifiants pour les gérer. Deux solutions sont disponibles:

Chaque fois que vous ajoutez un carré, vous incrémentez manuellement une liste d'identifiants.

Vous avez une boucle qui cherche dans le document pour trouver les carrés, ainsi la méthode s'adapte directement au code. Mais comment récupérer tous les identifiants, sachant que vous ne connaissez pas le nombre exact de carrés (pas de boucle) et que vous ne savez pas où ils se trouvent dans la page?

Solution

Nous allons utiliser la méthode getElementByRegexId. Cette méthode a deux paramètres, à savoir:

L'expression régulière qui correspond aux identifiants.

[Fac] Le nom de la balise à rechercher. Si rien n'est indiqué, toutes les étiquettes doivent être prises en compte.

Le principe est simple: nous recherchons dans les éléments récupérés par getElementsByTagName, testons les ID et tout ce qui correspond à l'expression régulière est ajouté à une table:

 fonction getElementsByRegexId (regexpParam, tagParam) {// aucun nom de balise n'est spécifié, on cherche sur toutes les balises tagParam = (tagParam === undefined)? '*': tagParam; var elementsTable = new Array (); pour (var i = 0; i 

Exemple:

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

Article Précédent Article Suivant

Les Meilleurs Conseils