Comprendere il Document Object Model (DOM)

Il Document Object Model (DOM) è un elemento fondamentale dello sviluppo web, che funge da ponte tra il contenuto di una pagina (HTML), la sua presentazione (CSS) e il suo comportamento interattivo (JavaScript). Questo articolo approfondisce la natura del DOM, la sua relazione con HTML e CSS, e come i browser lo costruiscono per renderizzare una pagina web.

Cos'è il DOM?

Il DOM è un'interfaccia di programmazione implementata dai browser che consente agli script di leggere, manipolare e modificare dinamicamente il contenuto, la struttura e lo stile di un sito web. Rappresenta una pagina web come un albero di oggetti, in cui ogni nodo corrisponde a una parte del documento — un elemento, un attributo, un testo o un commento. Il DOM non fa parte delle specifiche di HTML o JavaScript; viene costruito dal browser secondo la specifica DOM standardizzata dal WHATWG e dal World Wide Web Consortium (W3C).

Un modo utile per pensarci: il file HTML è la ricetta, e il DOM è il piatto pronto che il browser serve effettivamente. Una volta terminato il parsing, il testo HTML non esiste più — il tuo JavaScript parla sempre e solo con il DOM. Ecco perché document.body.innerHTML = '...' modifica la pagina ma non riscrive mai il file .html originale su disco.

Come HTML si mappa su un albero DOM

Considera questo breve frammento di markup:

<body>
  <h1>Hello</h1>
  <p>A <em>short</em> note.</p>
</body>

Il browser lo trasforma in un albero in cui ogni tag diventa un nodo elemento e ogni sequenza di testo diventa un nodo testo:

HTMLBodyElement (body)
├── HTMLHeadingElement (h1)
│   └── #text "Hello"
└── HTMLParagraphElement (p)
    ├── #text "A "
    ├── HTMLElement (em)
    │   └── #text "short"
    └── #text " note."

Nota che anche gli spazi bianchi e il testo tra i tag diventano nodi reali — una sorpresa comune quando ci si aspetta che firstChild sia <h1> ma si ottiene invece un nodo testo. Per scoprire come il browser categorizza ogni tipo di nodo, consulta Comprendere i nodi del DOM e Proprietà dei nodi: tipo, tag e contenuto.

Esplora le sezioni JavaScript DOM

Questo capitolo è il punto di ingresso a una serie completa sul lavoro con il DOM in JavaScript. Ogni argomento qui sotto rimanda a un capitolo dedicato:

Comprendere i nodi del DOM — i mattoni fondamentali del DOM e come sono strutturati.
Selezionare elementi DOM — metodi per trovare elementi, inclusi getElement* e querySelector.
Manipolare il DOM — aggiungere, rimuovere e modificare elementi per creare pagine dinamiche.
Lavorare con gli stili nel DOM — applicare e leggere stili CSS tramite JavaScript.
Gestione degli eventi nel DOM — rispondere alle interazioni degli utenti in modo efficiente.
Attraversare il DOM — navigare nell'albero per raggiungere nodi padre, figlio e fratello.
Tecniche di manipolazione del DOM — DocumentFragment, clonazione di nodi e aggiornamenti in batch.
Lavorare con i form — lettura degli input, validazione e gestione degli invii.
Tecniche avanzate del DOM — manipolazioni complesse e ottimizzazioni.
Librerie di manipolazione DOM — librerie come jQuery che semplificano le operazioni comuni.
Compatibilità cross-browser del DOM — mantenere le manipolazioni coerenti tra i diversi browser.
Considerazioni sull'accessibilità del DOM — buone pratiche per pagine accessibili.
Debug e strumenti — ispezione e risoluzione dei problemi del DOM.
Ottimizzazione delle prestazioni — strategie per aggiornamenti rapidi e fluidi.
Elementi interattivi e widget — realizzazione di componenti interattivi coinvolgenti.

Relazione tra HTML, CSS e il DOM

HTML, CSS e il DOM interagiscono strettamente per fornire una pagina web:

HTML fornisce la struttura di base delle pagine, che viene poi rappresentata come albero DOM.
CSS viene utilizzato per controllare il layout e l'aspetto degli elementi all'interno del DOM. Il browser analizza gli stili in un CSSOM (CSS Object Model), che viene combinato con il DOM per costruire l'albero di rendering. Quando gli stili cambiano, il browser ricalcola gli stili calcolati e aggiorna l'albero di rendering di conseguenza, riflettendo le modifiche allo stile.
JavaScript utilizza il DOM per interagire con HTML e CSS e modificarli, consentendo modifiche dinamiche al contenuto e allo stile della pagina.

Il processo è simbiotico: HTML viene trasformato nel DOM, CSS stilizza il DOM e JavaScript manipola il DOM, aggiornando ciò che l'utente vede sullo schermo.

Come il browser costruisce il DOM

Il processo di costruzione del DOM è una parte fondamentale di come i browser web interpretano HTML e CSS di una pagina web e li trasformano in una visualizzazione visibile e interattiva. Ecco come si svolge tipicamente questo processo:

Parsing dell'HTML: Il browser analizza il codice sorgente HTML di una pagina web. Durante questo processo di parsing, il browser identifica elementi come tag, attributi e il loro contenuto testuale. Ogni elemento, attributo e porzione di testo diventa parte dell'albero DOM come nodo.
Costruzione dell'albero DOM: Man mano che l'HTML viene analizzato, il browser costruisce un albero DOM in cui ogni nodo rappresenta un object nel documento. Questa struttura ad albero rispecchia la struttura HTML ma consente ai linguaggi di programmazione come JavaScript di interagire con gli elementi della pagina in modo programmatico.
Costruzione dell'albero di rendering: Parallelamente alla costruzione dell'albero DOM, il browser costruisce un albero di rendering, che combina gli elementi DOM con i corrispondenti stili CSS. A differenza dell'albero DOM, l'albero di rendering non include elementi non visivi come i tag <script> o gli elementi con display: none;.
Layout: Una volta costruito l'albero di rendering, il browser calcola il layout, determinando la posizione esatta e le dimensioni di ciascun object sullo schermo.
Painting: Il passaggio finale riguarda il disegno dell'albero di rendering sullo schermo. Questo passaggio traduce i nodi dell'albero di rendering in pixel effettivi sullo schermo, visualizzando di fatto la pagina web.

Esempio pratico: costruire e stilizzare una pagina web

Ecco un semplice esempio HTML che illustra l'interazione tra HTML, CSS e il DOM:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Sample DOM Page</title>
    <style>
        #container {
            border: 2px solid black;
            padding: 20px;
            margin-top: 20px;
        }
        h1 {
            color: navy;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Welcome to Our Website</h1>
        <p>This is a sample paragraph to demonstrate the DOM in action.</p>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const heading = document.querySelector('h1');
            heading.style.backgroundColor = 'yellow';
        });
    </script>
</body>
</html>

Provalo tu stesso »

Spiegazione dell'esempio

Struttura HTML: Questo documento HTML definisce la struttura della pagina, incluso un contenitore div che contiene un'intestazione e un paragrafo.
Stile CSS: Gli stili CSS inline stilizzano il contenitore, l'intestazione e il paragrafo, dimostrando come CSS influisce sull'aspetto degli elementi HTML.
Interazione JavaScript: Uno script inline attende il caricamento del DOM e poi modifica il colore di sfondo dell'intestazione in giallo. Questa interazione mostra come JavaScript può manipolare il DOM dopo che è stato costruito dal browser.

Leggere l'albero da JavaScript

Non è necessario avere un browser per ragionare sul DOM come struttura dati — è semplicemente un grafo di oggetti. Il frammento seguente costruisce un piccolo albero di oggetti semplici che rispecchia la forma del DOM (children, nomi dei tag, testo) e lo percorre per contare i nodi elemento, esattamente come farebbe querySelectorAll('*').length in un browser:

// A minimal model of a DOM subtree.
const tree = {
  tag: 'body',
  children: [
    { tag: 'h1', children: [{ text: 'Hello' }] },
    {
      tag: 'p',
      children: [
        { text: 'A ' },
        { tag: 'em', children: [{ text: 'short' }] },
        { text: ' note.' },
      ],
    },
  ],
};

function countElements(node) {
  // A node is an "element" when it has a tag; text nodes only have `text`.
  let count = node.tag ? 1 : 0;
  for (const child of node.children ?? []) {
    count += countElements(child);
  }
  return count;
}

console.log(countElements(tree)); // 4

L'albero contiene quattro nodi elemento (body, h1, p, em); le stringhe semplici sono nodi testo e non vengono conteggiate. Questa discesa ricorsiva è la stessa idea alla base della vera traversata del DOM — consulta Attraversare il DOM per le API del browser (childNodes, firstElementChild, parentNode e simili).

Errori comuni

Anche testo e spazi bianchi sono nodi. element.childNodes include i nodi testo per le interruzioni di riga e gli spazi tra i tag. Usa children o firstElementChild quando vuoi solo elementi.
Esegui gli script dopo che il DOM esiste. Uno <script> in <head> viene eseguito prima che il body venga analizzato, quindi document.querySelector('h1') restituisce null. Attendi DOMContentLoaded, inserisci lo script alla fine di <body>, oppure aggiungi l'attributo defer.
innerHTML non è gratuito. Assegnare a innerHTML rianalizza la stringa e ricostruisce l'intero sottoalbero, eliminando i nodi esistenti e i loro listener di eventi. Per piccole modifiche al testo preferisci textContent; per modifiche strutturali considera i DocumentFragment.
Il DOM è vivo, il sorgente HTML non lo è. Modificare il DOM non cambia mai il file HTML originale, e "Visualizza sorgente" mostra il file così come è stato consegnato, non il DOM attuale. Usa il pannello Elements del browser per ispezionare l'albero live.

Informazione

Per ottimizzare le interazioni web, acquisisci familiarità con le proprietà dei nodi del DOM. Comprendere i diversi tipi di nodo, come elementi e testo, migliora la tua capacità di scrivere JavaScript efficace e mirato per la manipolazione dinamica dei contenuti web.

Conclusione

Comprendere il DOM è essenziale per qualsiasi sviluppatore web. Fornisce gli strumenti per accedere e aggiornare dinamicamente il contenuto, la struttura e lo stile di una pagina web. Padroneggiando come il DOM interagisce con HTML e CSS, gli sviluppatori possono creare applicazioni web più efficienti e dinamiche. Questa conoscenza fondamentale è cruciale per manipolare i contenuti web e creare siti web interattivi e dinamici.

Esercizio

Pratica

Quale ruolo svolge JavaScript con il Document Object Model (DOM)?

JavaScript viene utilizzato per applicare stili CSS al DOM.JavaScript può manipolare il DOM per aggiungere, modificare o rimuovere elementi e attributi HTML.JavaScript viene utilizzato per memorizzare e recuperare dati nel DOM.JavaScript può modificare tutti gli elementi HTML della pagina tramite il DOM.JavaScript viene utilizzato per gestire gli eventi sugli elementi HTML.JavaScript non può modificare il contenuto degli elementi HTML.