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

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.

Esercizi

Base · facile

Crea una pagina con un <h1 id="titolo">, selezionalo con querySelector e stampa il suo testo in console.

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

Intermedio · medio

Aggiungi un <p> e leggi anche il suo testo. Cambia il testo dell’HTML, ricarica e verifica che console.log mostri il nuovo valore: spiega perché cambia.

Sfida · difficile

Spiega a parole tue cosa significa che il browser rappresenta la pagina come un «albero» di elementi e perché JavaScript ha bisogno del DOM per leggerla o modificarla. Indica cosa succede se provi a selezionare un elemento che nell’HTML non esiste.

Controllo finale

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