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 :

<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 :

let 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 :

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

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

Des paragraphes et un bouton sont donnés. Lorsqu'on clique sur le bouton, trouvez tous les paragraphes, parcourez-les avec une boucle et définissez le texte de chaque paragraphe sur la valeur 'text'.

Des paragraphes avec du texte et un bouton sont donnés. Lorsqu'on clique sur le bouton, écrivez à la fin du texte de chaque paragraphe son numéro d'ordre.

Des champs de saisie avec des nombres, un paragraphe et un bouton sont donnés. Lorsqu'on clique sur le bouton, trouvez la somme des nombres des champs de saisie et écrivez cette somme dans le texte du paragraphe.