Comment faire une boucle FOR de tous les éléments avec la même CLASS CSS en JavaScript ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-05-11 14:05:03
Thèmes : javascript - class - boucle
Question

Bonjour, j'ai plusieurs balises HTML qui ont une CLASS CSS identique. Comment faire en JavaScript une boucle FOR pour parcourir tous ces éléments ?

Réponse

Vous pouvez utiliser la fonction document.getElementsByClassName() pour récupérer tous les éléments HTML qui disposent d'une CLASS CSS identique.

Cette fonction recherche dans tout le document les CLASS dont le nom est spécifié.

Les éléments identifiés sont alors stockés dans un tableau.

Vous pouvez ainsi concevoir une boucle for pour itérer les éléments avec la CLASS spécifiée.

  • On déclare la CLASS recherchée avec document.getElementsByClassName().
  • On itère chaque CLASS identifiée avec for et la limite elements.length.
  • On récupère chaque élément du tableau avec elements[i].

Exemple :

var elements = document.getElementsByClassName("test");

for(var i = 0; i < elements.length; i++) {
alert(elements[i]);
}