Il metodo querySelector() in JavaScript

Il metodo querySelector() in JavaScript seleziona il primo elemento del documento che corrisponde al selettore CSS specificato. E' un metodo dell'oggetto document.

document.querySelector(selettoreCSS)

Tra le parentesi tonde devo indicare il selettore del foglio di stile CSS che voglio individuare. Può essere qualsiasi selettore valido in CSS, come un id, una classe, un tipo di tag, o anche selettori più complessi.

Il metodo restituisce la prima occorrenza che trova nella pagina HTML, ignorando tutte le successive.

A cosa serve? Una volta selezionato l'elemento, mi permette di manipolarlo. Ad esempio, posso cambiare il suo contenuto, gli stili, ascoltare eventi, ecc.

Ad esempio, ho una pagina web con un paragrafo e un bottone. Voglio cambiare il testo del paragrafo quando il bottone viene premuto.

Ecco come potrebbe essere strutturato il codice HTML e lo script:

<!DOCTYPE html>
<html>
<head>
<title>Esempio Pratico</title>
</head>
<body>
<p id="paragrafo">Questo è il testo originale del paragrafo.</p>
<button id="bottone">Cambia Testo</button>
<script>
// Selezionare il paragrafo tramite il suo ID
var paragrafo = document.querySelector('#paragrafo');
// Selezionare il bottone tramite il suo ID
var bottone = document.querySelector('#bottone');
// Aggiungere un evento di clic al bottone
bottone.addEventListener('click', function() {
// Cambiare il testo del paragrafo
paragrafo.textContent = "Il testo è stato cambiato!";
});
</script>
</body>
</html>

All'interno del tag <script> utilizzo il metodo document.querySelector per selezionare sia il paragrafo sia il bottone.

Poi aggiungo un evento di clic al bottone per cambiare il testo del paragrafo.

Come funziona?

Per capire meglio il funzionamento analizzo il codice più nel dettaglio.

Inizialmente utilizzo document.querySelector per selezionare il primo paragrafo e bottone del documento, usando i loro ID come selettori, rispettivamente #paragrafo e #bottone.

var paragrafo = document.querySelector('#paragrafo');
var bottone = document.querySelector('#bottone');

Poi aggiungo un event listener ("ascoltatore di eventi") al bottone tramite il metodo addEventListener.

Questo ascoltatore resta in attesa che l'evento di clic si verifichi sul bottone.

bottone.addEventListener('click', function() {
paragrafo.textContent = "Il testo è stato cambiato!";
});

Quando il bottone viene cliccato, la funzione di callback, quella all'interno di addEventListener, viene eseguita.

Questa funzione cambia il testo del paragrafo da "Questo è il testo originale del paragrafo." in "Il testo è stato cambiato!".

E' un esempio pratico molto semplice che dimostra come si utilizza il metodo document.querySelector per selezionare e manipolare gli elementi del DOM.

E così via.