InnoMarts logo
InnoMarts
Fast websites
← Back to course

Il DOM

Il DOM

Bentornato.

Nella lezione precedente hai imparato gli oggetti.

Gli oggetti aiutano JavaScript a salvare dati strutturati.

Molto utile.

Molto serio.

Molto amico delle parentesi graffe.

Oggi ci avviciniamo ancora di più allo sviluppo web reale.

Impariamo il DOM.

DOM significa Document Object Model.

Sembra molto ufficiale.

Quasi una cosa scritta da un comitato in una stanza con caffè pessimo.

Ma l’idea è semplice.

Il DOM è il modo in cui JavaScript vede la tua pagina HTML.

Grazie al DOM, JavaScript può:

Senza il DOM, JavaScript vive soprattutto nella console.

Con il DOM, JavaScript può toccare la pagina.

Con cautela.

Di solito.

Cosa Imparerai

In questa lezione imparerai:

Alla fine di questa lezione capirai come JavaScript comunica con una pagina web.

Questo è un grande passo.

Prima JavaScript parlava soprattutto con se stesso nella console.

Ora inizia a parlare con la pagina.

Come uno sviluppatore che finalmente esce dal terminale e vede la luce del sole.

Per poco.

Poi torna nel terminale.

Che Cos'è il DOM?

Il DOM è una rappresentazione della tua pagina HTML.

Quando il browser carica l’HTML, crea una struttura che JavaScript può usare.

Esempio HTML:

<h1>Ciao</h1>
<p>Benvenuto in JavaScript.</p>

Il browser trasforma tutto questo in qualcosa che JavaScript può leggere e modificare.

JavaScript può poi fare cose come:

document.querySelector("h1").textContent = "Ciao da JavaScript!";

La pagina cambia.

Magia?

No.

DOM.

Meglio della magia.

Perché si può debuggare.

Più o meno.

L'HTML Diventa Oggetti

DOM significa Document Object Model.

La parola importante qui è object.

Il browser tratta gli elementi come oggetti.

Per esempio, questo elemento HTML:

<h1 id="title">JavaScript</h1>

può essere raggiunto in JavaScript:

const titleElement = document.getElementById("title");

Ora titleElement è un oggetto JavaScript che rappresenta quell’elemento HTML.

Puoi leggerlo.

Cambiarlo.

Stilizzarlo.

Spostarlo.

Farlo soffrire.

Ma per favore no.

Usa il potere con responsabilità.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir javascript-lesson7
cd javascript-lesson7
touch index.html
touch script.js

Il progetto dovrebbe essere così:

javascript-lesson7/
  index.html
  script.js

Apri la cartella nel tuo editor.

Oggi lavoriamo direttamente con la pagina web.

La console è ancora utile.

Ma adesso anche la pagina cambierà.

Finalmente risultati visibili.

Il browser si sta preparando emotivamente.

Scrivi l'HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Il DOM</title>
</head>
<body>
  <h1 id="mainTitle">Il DOM</h1>
  <p id="description">JavaScript può cambiare questo testo.</p>

  <script src="script.js"></script>
</body>
</html>

Apri il file nel browser.

Poi apri script.js.

Siamo pronti a controllare la pagina.

Non tutto internet.

Solo questa pagina.

Restiamo umili.

Selezionare un Elemento con getElementById

Il metodo getElementById trova un elemento tramite il suo id.

Esempio:

const titleElement = document.getElementById("mainTitle");

console.log(titleElement);

Aggiorna il browser e apri la console.

Dovresti vedere l’elemento <h1>.

Questa riga:

document.getElementById("mainTitle")

significa:

“Trova l’elemento con id mainTitle.”

L’id nell’HTML è:

<h1 id="mainTitle">Il DOM</h1>

JavaScript lo trova.

Lo salva in una variabile.

Ora possiamo lavorarci.

Come piccoli meccanici del web.

Con meno attrezzi.

E più punto e virgola.

Cambiare Testo con textContent

Ora cambiamo il testo.

Aggiungi questo a script.js:

const titleElement = document.getElementById("mainTitle");

titleElement.textContent = "JavaScript Ha Cambiato Questo Titolo";

Aggiorna il browser.

Il titolo dovrebbe cambiare.

HTML originale:

<h1 id="mainTitle">Il DOM</h1>

Ma JavaScript lo cambia in:

JavaScript Ha Cambiato Questo Titolo

Questo è importante.

Il file HTML contiene ancora il vecchio testo.

Ma la pagina nel browser mostra il nuovo testo perché JavaScript ha modificato il DOM.

JavaScript non ha riscritto il file.

Ha modificato la pagina nel browser.

Come mettere un cappello a una statua.

La statua è sempre la stessa.

Ma ora sembra diversa.

Selezionare con querySelector

Esiste un altro modo molto comune per selezionare elementi:

document.querySelector()

Esempio:

const descriptionElement = document.querySelector("#description");

descriptionElement.textContent = "Il DOM ora è sotto il controllo di JavaScript.";

#description significa:

“Trova l’elemento con id description.”

Proprio come in CSS.

Perché querySelector usa i selettori CSS.

Esempi:

document.querySelector("h1");
document.querySelector("#mainTitle");
document.querySelector(".card");

Questo rende querySelector molto flessibile.

Se conosci i selettori CSS, sai già come trovare elementi.

Complimenti.

La tua conoscenza CSS è entrata nella palestra JavaScript.

getElementById o querySelector?

Entrambi possono selezionare elementi.

Esempio con getElementById:

const title = document.getElementById("mainTitle");

Esempio con querySelector:

const title = document.querySelector("#mainTitle");

Entrambi funzionano.

Regola semplice:

Usa getElementById quando selezioni tramite id.

Usa querySelector quando vuoi più flessibilità.

Per un principiante vanno bene entrambi.

Non iniziamo una guerra religiosa su questo.

La programmazione ha già abbastanza drammi.

Cambiare Stili con JavaScript

Puoi anche cambiare gli stili.

Esempio:

const titleElement = document.getElementById("mainTitle");

titleElement.style.color = "blue";
titleElement.style.fontSize = "48px";

Aggiorna il browser.

Il titolo diventa blu e più grande.

JavaScript può modificare direttamente gli stili CSS.

Ma fai attenzione.

Se metti troppo stile dentro JavaScript, il codice può diventare disordinato.

Di solito il CSS dovrebbe gestire gli stili.

JavaScript dovrebbe aggiungere o rimuovere classi.

È più pulito.

Come usare gli strumenti giusti invece di aggiustare tutto con il nastro adesivo.

Anche se il nastro adesivo a volte è potente.

Cambiare Classi

Usiamo le classi invece degli stili diretti.

Aggiorna index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Il DOM</title>

  <style>
    .highlight {
      color: white;
      background-color: #2563eb;
      padding: 12px 18px;
      border-radius: 12px;
    }
  </style>
</head>
<body>
  <h1 id="mainTitle">Il DOM</h1>
  <p id="description">JavaScript può cambiare questo testo.</p>

  <script src="script.js"></script>
</body>
</html>

Ora aggiorna script.js:

const titleElement = document.getElementById("mainTitle");

titleElement.classList.add("highlight");

Aggiorna il browser.

La classe viene aggiunta.

Lo stile appare.

Questo è uno schema molto comune:

element.classList.add("nome-classe");

Puoi anche rimuovere una classe:

element.classList.remove("highlight");

Oppure alternare una classe:

element.classList.toggle("highlight");

toggle significa:

Molto utile.

Molto elegante.

Quasi sospetto.

Creare Elementi

JavaScript può creare nuovi elementi HTML.

Esempio:

const newParagraph = document.createElement("p");

newParagraph.textContent = "Questo paragrafo è stato creato da JavaScript.";

console.log(newParagraph);

Questo crea un paragrafo.

Ma non appare ancora nella pagina.

Perché?

Perché creare un elemento non è la stessa cosa che aggiungerlo alla pagina.

Lo hai creato.

Ora devi collegarlo.

Come costruire una mensola e poi ricordarti che è ancora sul pavimento.

Aggiungere Elementi alla Pagina

Per aggiungere un elemento alla pagina, usa appendChild.

Esempio:

const newParagraph = document.createElement("p");
newParagraph.textContent = "Questo paragrafo è stato creato da JavaScript.";

document.body.appendChild(newParagraph);

Aggiorna il browser.

Ora il paragrafo appare.

Questa riga:

document.body.appendChild(newParagraph);

significa:

“Aggiungi questo nuovo paragrafo dentro il body.”

Molto utile.

Così JavaScript può creare contenuto dinamico.

Attività.

Messaggi.

Card.

Prodotti.

Avvisi casuali.

La solita vita da sviluppatore web.

Rimuovere Elementi

Puoi anche rimuovere elementi.

Esempio:

const descriptionElement = document.getElementById("description");

descriptionElement.remove();

Aggiorna il browser.

Il paragrafo sparisce.

JavaScript lo ha rimosso dal DOM.

Di nuovo, il file HTML originale non viene modificato.

Cambia solo la pagina nel browser.

Il DOM è temporaneo.

Come la motivazione dopo aver letto un messaggio di errore lungo.

Ma noi continuiamo.

innerHTML

Esiste anche una proprietà chiamata innerHTML.

Permette di inserire HTML come stringa.

Esempio:

const descriptionElement = document.getElementById("description");

descriptionElement.innerHTML = "<strong>Ora questo testo è in grassetto.</strong>";

Funziona.

Ma fai attenzione.

Se metti input dell’utente dentro innerHTML, può essere pericoloso.

Perché?

Perché l’HTML può contenere script.

E gli script possono creare problemi di sicurezza.

Per ora, regola semplice:

Usa textContent per il testo.

Usa innerHTML solo quando ti serve davvero HTML.

Non mettere input casuale dell’utente dentro innerHTML.

I bug di sicurezza non sono carini.

Non portano caffè.

Costruire un Pannello Messaggi

Ora costruiamo un piccolo pannello messaggi.

Aggiorna index.html:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Il DOM</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }

    button {
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
      margin-right: 8px;
    }

    button:hover {
      background-color: #1d4ed8;
    }

    .message {
      margin-top: 20px;
      padding: 16px;
      border-radius: 14px;
      background-color: #eff6ff;
      border: 2px solid #bfdbfe;
    }

    .success {
      background-color: #ecfdf5;
      border-color: #bbf7d0;
      color: #166534;
    }

    .warning {
      background-color: #fffbeb;
      border-color: #fde68a;
      color: #92400e;
    }
  </style>
</head>
<body>
  <h1>Il DOM</h1>

  <div class="card">
    <p id="message" class="message">Clicca un pulsante per cambiare questo messaggio.</p>

    <button id="successButton">Mostra Successo</button>
    <button id="warningButton">Mostra Avviso</button>
    <button id="clearButton">Pulisci</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

Ora aggiorna script.js:

const messageElement = document.getElementById("message");
const successButton = document.getElementById("successButton");
const warningButton = document.getElementById("warningButton");
const clearButton = document.getElementById("clearButton");

function showSuccessMessage() {
  messageElement.textContent = "Successo! Il DOM è stato aggiornato.";
  messageElement.className = "message success";
}

function showWarningMessage() {
  messageElement.textContent = "Attenzione! JavaScript sta toccando la pagina.";
  messageElement.className = "message warning";
}

function clearMessage() {
  messageElement.textContent = "Clicca un pulsante per cambiare questo messaggio.";
  messageElement.className = "message";
}

successButton.addEventListener("click", showSuccessMessage);
warningButton.addEventListener("click", showWarningMessage);
clearButton.addEventListener("click", clearMessage);

Aggiorna il browser.

Clicca i pulsanti.

Il messaggio cambia.

Lo stile cambia.

La pagina reagisce.

Questo è il DOM in azione.

JavaScript non sta più solo parlando.

Sta facendo.

Pericoloso.

Ma bellissimo.

Come Funziona Questo Codice

Queste righe trovano gli elementi:

const messageElement = document.getElementById("message");
const successButton = document.getElementById("successButton");
const warningButton = document.getElementById("warningButton");
const clearButton = document.getElementById("clearButton");

Questa funzione mostra un messaggio di successo:

function showSuccessMessage() {
  messageElement.textContent = "Successo! Il DOM è stato aggiornato.";
  messageElement.className = "message success";
}

Questa funzione mostra un avviso:

function showWarningMessage() {
  messageElement.textContent = "Attenzione! JavaScript sta toccando la pagina.";
  messageElement.className = "message warning";
}

Questa funzione resetta il messaggio:

function clearMessage() {
  messageElement.textContent = "Clicca un pulsante per cambiare questo messaggio.";
  messageElement.className = "message";
}

Queste righe collegano i pulsanti alle funzioni:

successButton.addEventListener("click", showSuccessMessage);
warningButton.addEventListener("click", showWarningMessage);
clearButton.addEventListener("click", clearMessage);

Questo è uno schema molto importante:

L’utente clicca.

La funzione parte.

Il DOM cambia.

La pagina si aggiorna.

Questo è frontend development in un piccolo panino.

Errori Comuni

Dimenticare # in querySelector

Sbagliato:

const title = document.querySelector("mainTitle");

Corretto:

const title = document.querySelector("#mainTitle");

Se selezioni un id con querySelector, usa #.

Proprio come in CSS.

Senza #, JavaScript cerca un elemento chiamato <mainTitle>.

Che probabilmente non esiste.

A meno che il tuo HTML non sia diventato molto creativo.

Provare a Cambiare un Elemento Prima che Esista

Se lo script parte prima che l’HTML sia caricato, JavaScript potrebbe non trovare l’elemento.

Per questo spesso mettiamo questo alla fine del body:

<script src="script.js"></script>

Dopo gli elementi HTML.

Bene.

Semplice.

Meno drammi.

Usare textContent Quando Vuoi HTML

Questo:

element.textContent = "<strong>Ciao</strong>";

mostra il testo esattamente così:

<strong>Ciao</strong>

Non crea testo in grassetto.

Per HTML usa:

element.innerHTML = "<strong>Ciao</strong>";

Ma ricorda:

Usa innerHTML con attenzione.

È potente.

E le cose potenti possono creare mal di testa potenti.

Usare className e Rimuovere Tutte le Classi per Errore

Questo:

messageElement.className = "success";

sostituisce tutte le classi.

Se l’elemento aveva:

<p class="message"></p>

ora ha solo:

<p class="success"></p>

Questo può rompere lo stile.

Per questo abbiamo usato:

messageElement.className = "message success";

Perché vogliamo mantenere entrambe le classi.

I dettagli contano.

Il CSS osserva.

Pratica

Crea una pagina con:

Quando il pulsante viene cliccato:

Esempio HTML:

<h1 id="title">Vecchio Titolo</h1>
<p id="text">Vecchio testo.</p>
<button id="changeButton">Cambia</button>

Esempio JavaScript:

const titleElement = document.getElementById("title");
const textElement = document.getElementById("text");
const changeButton = document.getElementById("changeButton");

function changeContent() {
  titleElement.textContent = "Nuovo Titolo";
  textElement.textContent = "Il paragrafo è stato cambiato da JavaScript.";
  textElement.classList.add("highlight");
}

changeButton.addEventListener("click", changeContent);

Eseguilo.

Cambialo.

Rompilo.

Sistemalo.

Il DOM diventa più facile solo con la pratica.

Non diventa più facile fissandolo.

Purtroppo.

Ci ho provato.

Mini Challenge

Costruisci una piccola notification box.

La pagina deve avere:

Quando l’utente clicca “Mostra Info”:

Messaggio informativo mostrato.

Quando l’utente clicca “Mostra Errore”:

Qualcosa è andato storto.

Quando l’utente clicca “Reset”:

Nessun messaggio ancora.

Usa classi per cambiare lo stile.

Per esempio:

.info {
  background-color: #eff6ff;
}

.error {
  background-color: #fef2f2;
}

Questa sfida è molto vicina al lavoro reale.

I siti mostrano continuamente messaggi.

Successi.

Avvisi.

Errori.

Form.

Notifiche.

Piccole scatole di danno emotivo.

Il DOM le gestisce tutte.

Riepilogo

Oggi hai imparato:

Questo è un grande passo.

Il DOM è dove JavaScript diventa visibile.

Prima del DOM, JavaScript è logica.

Con il DOM, JavaScript diventa interazione.

Pulsanti.

Messaggi.

Card.

Menu.

Form.

Tutto inizia qui.

La pagina non sta più solo ferma.

È viva.

Leggermente drammatica.

Ma viva.

Prossima Lezione

Nella prossima lezione impareremo gli eventi.

Gli eventi sono il modo in cui JavaScript reagisce agli utenti.

Click.

Digitazione.

Invio di form.

Movimento del mouse.

Pressione dei tasti.

In pratica, gli eventi sono il modo in cui il browser dice:

“È successo qualcosa.”

E JavaScript risponde:

“Ho una funzione per quello.”