DOM in JavaScript: guida completa

di

Quando si inizia a studiare JavaScript, uno dei concetti fondamentali da comprendere è il DOM. Senza di esso, una pagina web rimarrebbe statica e priva di interazione.

In questo articolo viene spiegato in modo chiaro e progressivo:

  • cos’è il DOM
  • come selezionare elementi
  • come rendere una pagina interattiva

Cos’è il DOM?

DOM significa Document Object Model.

Quando il browser carica una pagina HTML, non la interpreta come semplice testo, ma la trasforma in una struttura ad albero composta da oggetti.

Esempio:

<body>
  <h1 id="titolo">Ciao</h1>
  <p class="testo">Benvenuto</p>
</body>

Diventa:

Document
 └── body
      ├── h1
      └── p

Ogni elemento HTML diventa un nodo che può essere manipolato tramite JavaScript.

Perché il DOM è importante?

Grazie al DOM è possibile:

  • modificare contenuti dinamicamente
  • cambiare stili
  • reagire alle azioni dell’utente
  • creare nuovi elementi

In altre parole, il DOM consente di trasformare una pagina statica in un’esperienza interattiva.

Selezionare elementi nel DOM

Per poter modificare un elemento, è necessario prima selezionarlo.

Di seguito i metodi principali.

getElementById

Questo metodo seleziona un elemento tramite il suo id.

HTML

<h1 id="titolo">Ciao</h1>

JavaScript

let titolo = document.getElementById("titolo");
console.log(titolo);

Restituisce un singolo elemento.

È:

  • veloce
  • preciso
  • molto utilizzato

getElementsByClassName

Permette di selezionare tutti gli elementi con una determinata classe.

HTML

<p class="testo">Uno</p>
<p class="testo">Due</p>

JavaScript

let elementi = document.getElementsByClassName("testo");
console.log(elementi);

Restituisce una HTMLCollection, cioè una lista di elementi.

Per accedere ai singoli elementi:

elementi[0].textContent = "Modificato";

getElementsByTagName

Consente di selezionare elementi in base al nome del tag.

HTML

<h2>Ciao</h2>
<h2>Mondo</h2>

JavaScript

let titoli = document.getElementsByTagName("h2");
console.log(titoli);

Anche in questo caso viene restituita una HTMLCollection.

Accesso agli elementi:

titoli[1].textContent = "Nuovo testo";

⚠️ Attenzione: HTMLCollection

Sia getElementsByClassName che getElementsByTagName restituiscono una lista.

Questo significa che:

❌ Non è corretto:

titoli.textContent = "Ciao";

✔ È corretto:

titoli[0].textContent = "Ciao";

addEventListener: rendere la pagina interattiva

Il metodo addEventListener è fondamentale per gestire le interazioni dell’utente.

Permette di eseguire codice quando si verifica un evento, come:

  • click
  • movimento del mouse
  • pressione di tasti
  • input

Esempio base

HTML

<button id="btn">Cliccami</button>

JavaScript

let btn = document.getElementById("btn");

btn.addEventListener("click", function() {
  alert("Hai cliccato!");
});

Quando l’utente clicca il bottone, viene eseguita una funzione.

Esempio pratico

let btn = document.getElementById("btn");
let btn2 = document.getElementById("btn2");

let numero = document.getElementById("numero");

let count = 0;

btn.addEventListener("click", function () {
    count++;
    numero.textContent = count;
});

btn2.addEventListener("click", function () {
            count--;
});

In questo caso:

  1. vengono selezionati gli elementi
  2. viene ascoltato un evento
  3. viene modificato il contenuto

Esercizi guidati

Esercizio 1: Cambiare testo con un bottone

Obiettivo

Quando si clicca un bottone, il testo di un titolo cambia.

HTML

<h1 id="titolo">Testo originale</h1>
<button id="btn">Cambia testo</button>

Passaggi guidati

  1. Selezionare il titolo
  2. Selezionare il bottone
  3. Aggiungere un evento click
  4. Cambiare il testo

Soluzione

let titolo = document.getElementById("titolo");
let btn = document.getElementById("btn");

btn.addEventListener("click", function() {
  titolo.textContent = "Testo cambiato!";
});

Esercizio 2: Mostra/Nascondi testo

Obiettivo

Quando si clicca un bottone, un paragrafo deve alternare tra visibile e nascosto.

HTML

<p id="testo">Questo è un testo segreto 👀</p>
<button id="btn">Mostra/Nascondi</button>

Passaggi guidati

  1. Selezionare il paragrafo
  2. Selezionare il bottone
  3. Tenere traccia dello stato (visibile/nascosto)
  4. Cambiare lo stile display

Soluzione

let testo = document.getElementById("testo");
let btn = document.getElementById("btn");btn.addEventListener("click", function() {
  if (testo.style.display === "none") {
    testo.style.display = "block";
  } else {
    testo.style.display = "none";
  }
});

Esercizio 3: Modificare più elementi

Obiettivo

Cambiare il colore di tutti i paragrafi quando si clicca un bottone.

HTML

<p class="testo">Paragrafo 1</p>
<p class="testo">Paragrafo 2</p>
<p class="testo">Paragrafo 3</p><button id="btn">Cambia colore</button>

Passaggi guidati

  1. Selezionare tutti i paragrafi
  2. Selezionare il bottone
  3. Al click, ciclare sugli elementi
  4. Cambiare lo stile

Soluzione

let paragrafi = document.getElementsByClassName("testo");
let btn = document.getElementById("btn");

btn.addEventListener("click", function() {
  for (let i = 0; i < paragrafi.length; i++) {
    paragrafi[i].style.color = "red";
  }
});

Esercizio 4: Contatore

Obiettivo

Quando si clicca un pulsante, il contatore aumenta, quando si clicca su un altro pulsante il contatore diminuisce.

HTML

 <h2 id="numero">0</h2> 
 <button id="btn">Aumenta</button>
 <button id="btn2">Diminuisci</button>
let btn = document.getElementById("btn");
let btn2 = document.getElementById("btn2");

let numero = document.getElementById("numero");

let count = 0;

btn.addEventListener("click", function () {
    count++;
    numero.textContent = count;
});

btn2.addEventListener("click", function () {
            count--;
});

Esercizi

  1. Creare un titolo, un paragrafo e un pulsante.
    Quando si clicca il pulsante:
    • il titolo cambia testo
    • il paragrafo cambia testo
  2. Creare un titolo, un paragrafo e un pulsante.
    Quando si clicca il pulsante:
    • il titolo cambia font
    • il paragrafo cambia colore
  3. Dato questo HTML:

    <ul>
    <li>Latte</li>
    <li>Pane</li>
    <li>Uova</li>
    <li>Caffè</li>
    </ul>

    <p id=”output”></p>

    Compito:
    Usare getElementsByTagName("li") e mostrare nel paragrafo il secondo elemento della lista.