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:

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

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

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

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

Sono dati dei paragrafi e un pulsante. Al click del pulsante trova tutti i paragrafi, iterali con un ciclo e imposta il testo di ogni paragrafo sul valore 'text'.

Sono dati dei paragrafi con testo e un pulsante. Al click del pulsante scrivi alla fine del testo di ogni paragrafo il suo numero d'ordine.

Sono dati degli input con numeri, un paragrafo e un pulsante. Al click del pulsante trova la somma dei numeri degli input e scrivi questa somma nel testo del paragrafo.