cat javascript/che-cos-e-il-dom-spiegato-con-la-pagina-davanti.md

Lezione 26 12 min

Che cos'è il DOM, spiegato con la pagina davanti

Capire che JavaScript vede la pagina come una struttura di elementi.

In parole semplici

Il DOM è il modo in cui il browser rappresenta la pagina per JavaScript. Puoi immaginarlo come l’elenco degli elementi HTML che JavaScript può leggere e modificare.

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

  • DOM: rappresentazione della pagina usata da JavaScript.
  • elemento: pezzo della pagina, per esempio h1, p o button.

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

<h1 id="titolo">Titolo iniziale</h1>

<script>
  const titolo = document.querySelector("#titolo");
  console.log(titolo.textContent);
</script>

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

Esercizio guidato

  1. Crea una pagina con h1 e p.
  2. Seleziona l’h1 con querySelector.
  3. Stampa il suo testo in console.
  4. Cambia il testo HTML e ricarica la pagina.

Controllo finale

Hai finito quando capisci che JavaScript sta leggendo un elemento già presente nella pagina.