Ottenere un gruppo di elementi in JavaScript

Nelle lezioni precedenti abbiamo utilizzato il metodo querySelector per ottenere un singolo elemento della pagina. Ora è il momento di imparare a ottenere un gruppo di elementi ed eseguire operazioni su molti elementi contemporaneamente.

Per questo esiste il metodo querySelectorAll, che ottiene tutti i tag che corrispondono a un selettore CSS sotto forma di array di elementi. Per fare qualcosa con gli elementi trovati, è necessario lavorare con l'array ottenuto, ad esempio, iterarlo con un ciclo e nel ciclo eseguire un'operazione con ciascun elemento singolarmente.

Supponiamo, ad esempio, di avere paragrafi con la classe www:

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

Otteniamo l'array di questi paragrafi, iteriamoli con un ciclo e nel ciclo stampiamo i testi dei paragrafi trovati nella console:

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

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

E ora aggiungiamo un punto esclamativo alla fine del testo di ogni paragrafo:

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

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