document.querySelectorAll() in JavaScript

Il metodo document.querySelectorAll() mi permette di selezionare gli elementi del DOM utilizzando selettori CSS. La sintassi di base è:

document.querySelectorAll(selettoreCSS)

Dove selettoreCSS è una stringa che rappresenta il selettore CSS degli elementi da selezionare.

Funziona con qualsiasi tipo di selettore CSS (classi, ID, attributi, pseudo-classi, ecc.).

Il metodo restituisce tutti gli elementi con il selettore CSS che ho indicato.

A cosa serve? Una volta selezionati, questi elementi possono essere facilmente manipolati. E' utilizzato per applicare stili specifici a gruppi di elementi in base a determinate condizioni, assegnare gestori di eventi (event handling) a un insieme di elementi, raccogliere dati o valori da un gruppo di elementi, come input di un form, ecc.

Il funzionamento di questo metodo è simile a document.querySelector, ma mentre quest'ultimo restituisce solo il primo elemento che corrisponde al selettore CSS, querySelectorAll restituisce tutti gli elementi che soddisfano il criterio di selezione.

Un esempio pratico

Ho una pagina HTML con diversi tag <div> e voglio selezionare tutti quelli che hanno la classe ".highlight".

<html>
<body>
<div>Elemento 1</div>
<div class="highlight">Elemento 2</div>
<div>Elemento 3</div>
<div class="highlight">Elemento 4</div>
<script>
// Selezioniamo tutti i div con la classe 'highlight'
let elementiEvidenziati = document.querySelectorAll('div.highlight');
// Applichiamo il cambio di colore a ciascun elemento selezionato
elementiEvidenziati.forEach(elemento => {
elemento.style.color = 'red';
});
</script>
</body>
</html>

Il metodo querySelectorAll() seleziona tutti i tag <div> con la classe ".highlight".

Poi, attraverso un ciclo forEach, itera su ogni elemento selezionato e gli cambia il colore del testo impostando la proprietà color su 'red' (rosso).

Dopo l'esecuzione di questo script, il testo all'interno di tutti i div con la classe highlight è rosso.

Elemento 1
Elemento 2
Elemento 3
Elemento 4

E così via.