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.

Esercizio guidato

1. Crea tre elementi HTML.
2. Dai un id a uno di loro.
3. Selezionalo con querySelector.
4. Stampa l’elemento in console.
5. Prova un selettore sbagliato e osserva il risultato.

Controllo finale

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