[#2][JavaScript] getElementsByClassName, La classe américaine…

Excuse-moi de te dire ça mon pauvre José, mais tu confonds un peu tout. Tu fais un amalgame entre la coquetterie et la classe. Tu es fou. Tu dépenses tout ton argent dans les habits et accessoires de mode mais tu es ridicule. Enfin si ça te plaît…C’est toi qui les portes. — La Classe américaine (1993)

Je vous présentais il y a quelques temps la méthode de sélection par Id en JavaScript qu’est getElementById, aujourd’hui je voudrais vous présenter son frère (ou sa sœur, égalité toussa toussa) getElementsByClassName. Notez la petite subtilité, le S de Elements.

Pourquoi cette différence me direz-vous ?

Eh bien ce qu’il faut savoir (et je pense que vous le savez déjà) c’est que par définition, un Id est UNIQUE, ce qui veut dire que dans votre code vous ne devez PAS avoir une chose pareil !

C’est un peu comme avoir deux présidents dans un même pays, ça marche, mais le bordel que ça va être…

C’est pour cette raison (pas celle du président) qu’il n’y a pas de S quand on utilise la méthode getElementById.

En revanche, une classe n’est pas du tout unique, voyez une classe comme des MINIONS, ou encore comme des Gremlins, il peut y avoir plusieurs Gremlins dans une page…. heu… de classes ;)
Un code comme celui-ci est tout à fait valide

Il peut y avoir plusieurs éléments avec une même classe

Comment ça fonctionne ?

Imaginez que vous voulez sélectionner des éléments qui ont la même classe dans votre page afin de faire des traitements particulier sur ceux-ci.

Pour cela vous allez devoir utiliser la méthode getElementsByClassName sur l’objet document, comme cela :

Les lignes 2 à 4 : J’ai créer 3 divs avec la même classebogart
La ligne 7 : Je sélectionne les éléments dans mon document qui portent la classe ‘bogart’ et je les stocks dans une variable appelée ‘elements’ pour y accéder plus facilement
La ligne 8 : Je console log (c’est à dire, j’affiche dans la console) le contenu de la variable ‘elements’, ce qui nous donne :

Cela nous donne un tableau

Vous observerez que le résultat est un tableau, alors vous allez me dire “comment s’en servir ?” c’est un peu comme avoir une remorque sans voiture…

Eh bien sache toi qui me lis, que pour accéder aux éléments de ce tableau c’est très simple ! Yes papa, il suffit de boucler sur ce tableau.

Le résultat est le suivant :

Que s’est-il passé ?

Comme vous avez pu le voir plus haut, le résultat est un tableau contenant les trois divs. Pour accéder aux éléments d’un tableau il faut faire une boucle pour pouvoir les récupérer un par un, un peu comme si vous étiez dans un [ajouter un exemple]

Je créer donc une boucle FOR, qui prends trois paramètres, le premier est une variable compteur, c’est à dire que ce sera notre témoin pour s’assurer qu’on boucle autant de fois qu’on la préciser, un peu comme un pote de muscu qui nous aide et compte pour nous.

Ici la boucle est terminée, il est temps d’agir pour la stopper

Le deuxième paramètre est une condition, (si tu fais pas tes devoir jte fracasse le crâne), ici on pourrait traduire par ‘Si i est strictement inférieur à la longueur du tableau’ (genre si mon tableau a trois éléments, eh bien tant que i est strictement inférieur à 3) on continu de boucler.

Le troisième paramètre permet d’incrémenter (d’augmenter, d’ajouter) de 1 la variable i à chaque tour de boucle tant que i est inférieur à la longueur du tableau.

Pour accéder aux éléments dans notre boucle, il faut vous rappeler que notre variable élément est un tableau, donc pour y accéder on va utiliser l’annotation entre crochets ([]) et en plus de ça, rappelez-vous que notre variable i est notre compteur et qu’elle s’incrémente à chaque tour de boucles, donc au premier tour i vaudra 0 (car dans la boucle on a dit que i vaut 0) et au deuxième tour i vaudra 1 etc (voir le code plus haut).

Donc voila, vous savez comment utiliser la méthode getElementsByClassName et comment boucler sur un tableau avec la boucle for.
Félicitation vous avez appris pas mal de chose ! (enfin j’espère!)

Résumer :

  • Utilisation de la méthode getElementsByClassName
  • Utilisation des boucles (for)
  • Itération d’un tableau