Obtention d'un groupe d'éléments en JavaScript

Dans les leçons précédentes, nous avons utilisé la méthode querySelector pour obtenir un seul élément de la page. Maintenant, il est temps d'apprendre à obtenir un groupe d'éléments et d'effectuer des opérations sur plusieurs éléments à la fois.

Pour cela, il existe la méthode querySelectorAll, qui obtient toutes les balises correspondant à un sélecteur CSS sous la forme d'un tableau d'éléments. Pour faire quelque chose avec les éléments trouvés, il faut travailler avec le tableau obtenu, par exemple, le parcourir avec une boucle et dans la boucle exécuter une opération sur chaque élément individuellement.

Supposons, par exemple, que nous ayons des paragraphes avec la classe www :

html<p class="www">text1</p>
<p class="www">text2</p>
<p class="www">text3</p>

Obtenons le tableau de ces paragraphes, parcourons-les avec une boucle et dans la boucle affichons les textes des paragraphes trouvés dans la console :

javascriptlet elems = document.querySelectorAll('.www');

for (let elem of elems) {
  console.log(elem.textContent);
}

Et maintenant, ajoutons un point d'exclamation à la fin du texte de chaque paragraphe :

javascriptlet elems = document.querySelectorAll('.www');

for (let elem of elems) {
  elem.textContent = elem.textContent + '!';
}