Selezionare un elemento della pagina

In parole semplici

Prima di cambiare un elemento, JavaScript deve trovarlo. querySelector usa un selettore CSS, come #titolo o .classe.

Questa lezione fa parte del modulo Rendere interattiva una pagina. L’obiettivo del modulo è: Collegare JavaScript a HTML in modo graduale: selezionare elementi, reagire a eventi, leggere form e salvare dati.

Parole nuove

• selettore: testo che identifica un elemento, come in CSS.
• querySelector: metodo per trovare il primo elemento corrispondente.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: una todo list semplice che salva le attività nel browser.

Esempio da copiare

<p class="messaggio">Ciao</p>

<script>
  const messaggio = document.querySelector(".messaggio");
  console.log(messaggio);
</script>

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizi

Base · facile

Crea tre elementi, dai un id a uno e una class a un altro, poi selezionali entrambi con querySelector.

<p id="intro">Intro</p>
<p class="nota">Nota</p>

<script>
  console.log(document.querySelector("#intro"));  // per id
  console.log(document.querySelector(".nota"));   // per classe
</script>

Intermedio · medio

Prova un selettore che non corrisponde a nulla e stampa il risultato: otterrai null. Aggiungi un if che evita di usare l’elemento quando è null, così il codice non genera errori.

Sfida · difficile

Spiega la differenza tra querySelector (primo elemento) e querySelectorAll (tutti gli elementi corrispondenti). Mostra cosa restituiscono i due quando ci sono più elementi con la stessa classe e perché serve un ciclo per usare il secondo.

Controllo finale

Hai finito quando sai trovare un elemento con id e uno con classe.