smette di essere semplice testo e diventa un oggetto con cui un programma può interagire: leggerne il contenuto, cambiarne lo stile, aggiungerlo o rimuoverlo. La relazione tra DOM e JavaScript è spesso fonte di confusione: sono due tecnologie distinte. JavaScript è il linguaggio che esegue le istruzioni; il DOM è l’insieme di oggetti e metodi che quel linguaggio utilizza per intervenire sulla pagina. Senza il DOM, JavaScript non avrebbe un modo standard per raggiungere un elemento HTML; senza JavaScript (o un altro linguaggio di scripting), il DOM resterebbe una struttura inerte, consultabile ma non modificabile. Questa distinzione spiega anche perché un’istruzione come document.write() va considerata con attenzione: scrive direttamente nel flusso del documento durante il caricamento, ma se invocata dopo che la pagina è stata completamente analizzata può sovrascrivere l’intero contenuto esistente. Per inserimenti successivi al caricamento si preferiscono i metodi di creazione e inserimento nodi, più prevedibili e meno distruttivi. Il momento in cui lo script entra in azione dipende anche da come viene caricato: uno script bloccante eseguito prima che il DOM sia pronto può cercare elementi non ancora esistenti. Per questo motivo gli [attributi defer e async negli script HTML](https://www.conseolente.it/attributi-defer-async-funzionamento-script-html/) incidono direttamente sull’affidabilità delle operazioni di lettura e scrittura del DOM. ![Schema gerarchico di un albero DOM con nodo radice e nodi ramificati](https://www.conseolente.it/wp-content/uploads/2026/10/document-object-model-dom-cos-e-come-funziona-1-1024x683.webp) Ogni documento HTML viene convertito dal browser in una gerarchia di nodi collegati tra loro. ## Come è fatto l’albero del DOM Il browser rappresenta un documento come un **DOM Tree**, una struttura gerarchica in cui ogni elemento, attributo e porzione di testo occupa una posizione precisa rispetto agli altri. La costruzione avviene durante il parsing: il motore di rendering legge il markup riga per riga e genera un oggetto per ciascun tag incontrato, rispettando l’ordine di annidamento del codice sorgente. All’interno di questa gerarchia esistono tre categorie di nodo (node), l’unità elementare dell’albero: Nodo radice Rappresenta l’intero documento ed è unico: tutti gli altri nodi discendono da esso. Nodi ramo Corrispondono ai tag HTML, come , o

, e possono contenere altri nodi al loro interno. Nodi foglia Sono gli elementi terminali: il testo racchiuso in un tag o un singolo attributo, privi di figli. Una corretta chiusura e annidamento dei tag è ciò che permette al browser di costruire un albero valido: un elemento aperto senza la corrispondente chiusura, o annidato in modo scorretto, produce una gerarchia imprevedibile e può alterare il risultato delle operazioni di selezione successive. Per muoversi all’interno di questa struttura senza ricorrere ai metodi di ricerca, JavaScript espone proprietà di navigazione dirette: parentNode e parentElement risalgono verso il nodo superiore, childNodes e children scendono verso i discendenti, mentre nextSibling, previousSibling, nextElementSibling e previousElementSibling spostano l’accesso tra nodi dello stesso livello. Questa modalità, chiamata DOM traversal, è utile quando la posizione dell’elemento nel documento è nota ma non esiste un identificatore univoco da interrogare. ## Cos’è l’oggetto document nel DOM L’oggetto document è il nodo radice dell’intero HTML DOM e rappresenta la pagina caricata nel browser. È accessibile come proprietà dell’oggetto window (window.document) e costituisce il punto di partenza obbligato per qualsiasi ricerca o modifica: ogni metodo di selezione, da getElementById() a querySelectorAll(), viene invocato a partire da questo oggetto o da un suo discendente. Oltre ai metodi di ricerca, document espone collezioni predefinite che raggruppano automaticamente alcuni tipi di elementi presenti nella pagina: document.forms per i form, document.images per le immagini, document.links per i collegamenti, document.anchors per le ancore e document.scripts per gli script. Queste collezioni si aggiornano da sole quando il contenuto della pagina cambia, senza bisogno di una nuova interrogazione. Il metodo document.write() scrive direttamente nel documento durante la fase di parsing: se invocato prima che il caricamento sia completato, inserisce contenuto nel punto esatto in cui lo script viene eseguito; se invocato dopo, sovrascrive l’intera pagina. Per questo motivo è considerato poco affidabile per inserimenti dinamici e viene sostituito, nelle applicazioni moderne, da combinazioni di createElement() e appendChild(), che permettono di aggiungere nodi senza intaccare il resto del documento. ## DOM, HTML, BOM e Virtual DOM: le differenze HTML e DOM non coincidono: l’HTML è il codice sorgente scritto nel file, statico fino al caricamento; il DOM è la rappresentazione a oggetti che il browser costruisce a partire da quel codice e che può essere modificata dopo il caricamento senza che il file originale cambi. Ispezionando il codice sorgente di una pagina si vede l’HTML di partenza; ispezionando il DOM tramite gli strumenti per sviluppatori si vede lo stato attuale, comprese le modifiche applicate da JavaScript. | Concetto | Cosa rappresenta | Relazione con il DOM | | --- | --- | --- | | HTML | Codice sorgente statico del documento | È la base da cui il browser costruisce il DOM | | DOM | Struttura a oggetti del contenuto della pagina | Rappresenta la pagina a runtime, modificabile via script | | BOM | Oggetti del browser (finestra, cronologia, navigatore) | Gestisce il browser, non il contenuto della pagina | | Virtual DOM | Rappresentazione astratta del DOM in memoria | Calcola le differenze prima di aggiornare il DOM reale, riducendo le operazioni costose | Il BOM non fa parte di alcuno standard DOM: riunisce oggetti come Navigator, Location e History, che permettono a JavaScript di interagire con il browser stesso (indirizzo, cronologia di navigazione, informazioni sul dispositivo) e restano distinti dagli oggetti che rappresentano il contenuto della pagina. Il Virtual DOM, invece, non è uno standard ma una tecnica adottata da alcune librerie per ottimizzare gli aggiornamenti: anziché modificare direttamente il DOM reale a ogni cambiamento, calcola prima le differenze su una copia in memoria e applica al documento solo le modifiche necessarie, riducendo il numero di operazioni sul DOM effettivo, generalmente più lente. Il DOM è accessibile perché esposto tramite un’interfaccia di programmazione: in questo senso può essere descritto come un’API specifica per documenti, distinta da altre categorie di interfacce di programmazione (ad esempio quelle che espongono servizi remoti tramite protocolli di rete). Non è corretto equiparare un’API a un semplice indirizzo web: un’API è l’insieme di regole e oggetti con cui un programma può comunicare con un sistema, e il DOM ne è un esempio applicato esclusivamente alla struttura dei documenti. ## Come selezionare elementi nel DOM Prima di modificare un elemento, è necessario individuarlo nell’albero. Il DOM mette a disposizione più metodi di selezione, ciascuno adatto a un criterio diverso. | Metodo | Criterio | Risultato restituito | | --- | --- | --- | | getElementById() | Identificatore univoco | Un singolo elemento, o null se non trovato | | getElementsByTagName() | Nome del tag | Una HTMLCollection di tutti gli elementi corrispondenti | | getElementsByClassName() | Classe CSS | Una HTMLCollection, senza supporto al metodo namedItem() | | querySelector() | Selettore CSS qualsiasi | Il primo elemento che soddisfa il selettore | | querySelectorAll() | Selettore CSS qualsiasi | Una NodeList statica con tutti gli elementi corrispondenti | Una HTMLCollection non è un array vero e proprio, ma un oggetto simile a un array (array-like): i suoi elementi sono accessibili per indice o tramite il metodo item(); il metodo namedItem(), che recupera un elemento tramite il suo attributo id o name, è disponibile solo sulle collezioni ottenute per tag o per raccolte predefinite, non su quelle ottenute per classe. ### Se più elementi condividono lo stesso id Se nel documento esistono più elementi con lo stesso valore di id — pratica non valida ma tecnicamente possibile — getElementById() restituisce solo il primo elemento incontrato nell’ordine del documento, ignorando gli altri. Per evitare risultati inconsistenti, ogni id deve restare univoco nell’intera pagina. ### Se il sito deve supportare browser datati Se il progetto richiede compatibilità con Internet Explorer 8 o versioni precedenti, i metodi getElementsByClassName() e querySelectorAll() non sono disponibili: in quel caso la selezione va effettuata tramite getElementById(), getElementsByTagName() oppure tramite traversal manuale del DOM. ![Sequenza di modifiche a un elemento HTML tramite proprietà e metodi del DOM](https://www.conseolente.it/wp-content/uploads/2026/10/document-object-model-dom-cos-e-come-funziona-2-1024x683.webp) Contenuto, stile e attributi di un elemento possono essere aggiornati separatamente senza ricaricare la pagina. ## Come manipolare contenuto, stile e attributi Una volta selezionato, un elemento espone proprietà e metodi distinti a seconda di cosa si vuole modificare. Per il contenuto, la proprietà innerHTML legge o riscrive il markup interno dell’elemento, inclusi eventuali tag annidati; textContent opera invece solo sul testo, ignorando i tag e risultando più sicura quando il valore inserito proviene da fonti non controllate, perché non interpreta il contenuto come markup eseguibile. Per lo stile, la proprietà style permette di impostare singole regole **CSS** direttamente dall’elemento, ad esempio elemento.style.display = "none" per nasconderlo. Per interventi più estesi è preferibile applicare o rimuovere classi predefinite tramite classList, mantenendo la definizione visiva nel foglio di stile: la relazione tra Cascading Style Sheets (CSS) e DOM passa proprio da questo punto di contatto tra struttura e presentazione. Per gli attributi, getAttribute(nome) restituisce il valore corrente di un attributo HTML, setAttribute(nome, valore) lo imposta o lo crea se assente, e removeAttribute(nome) lo elimina. Gli attributi personalizzati che iniziano con il prefisso data- sono accessibili in modo diretto tramite la proprietà dataset: un attributo data-stato diventa elemento.dataset.stato, senza bisogno di richiamare getAttribute(). ### Come inserire un nuovo elemento nel DOM Aggiungere un elemento che non esiste ancora nel documento richiede una sequenza di passi distinti, più stabile rispetto a document.write() perché non interferisce con il contenuto già presente. 1. Creare il nodo con document.createElement("tag"), specificando il tipo di elemento desiderato. 2. Impostare contenuto, attributi o classi del nuovo nodo prima di collegarlo al documento. 3. Individuare il nodo genitore a cui agganciare l’elemento, tramite uno dei metodi di selezione. 4. Collegare il nuovo nodo con appendChild(), per aggiungerlo in coda, oppure con insertBefore(), per posizionarlo in un punto preciso. Per rimuovere un elemento esistente si utilizza removeChild() richiamato sul nodo genitore, oppure remove() invocato direttamente sul nodo da eliminare. ## Come il DOM gestisce gli eventi Il DOM non si limita a rappresentare la struttura della pagina: definisce anche il modo in cui gli elementi reagiscono alle azioni dell’utente. Ogni nodo può registrare uno o più ascoltatori tramite addEventListener(tipo, funzione), che collega un evento (clic del mouse, pressione di un tasto, invio di un modulo, caricamento della pagina) a una funzione eseguita al verificarsi dell’evento. A differenza dell’assegnazione diretta tramite attributi come onclick, addEventListener() permette di collegare più funzioni allo stesso evento sullo stesso elemento, senza che l’una sovrascriva l’altra, e offre il metodo complementare removeEventListener() per interrompere l’ascolto quando non è più necessario. Gli eventi più comuni gestiti tramite DOM riguardano tre categorie: eventi del mouse (click, mouseover, mouseout), eventi della tastiera (keydown, keyup) ed eventi dei moduli (submit, change, input). In ciascun caso, l’oggetto evento passato alla funzione contiene informazioni sul nodo che ha generato l’evento, accessibile tramite la proprietà target, utile per leggere o modificare l’elemento coinvolto senza doverlo selezionare nuovamente. ## Casi limite ed errori frequenti nella gestione del DOM Alcuni comportamenti del DOM producono risultati inattesi se non si considerano le condizioni in cui si verificano. ### Se l’elemento cercato non esiste Se getElementById() non trova alcun elemento corrispondente, restituisce null invece di generare un errore: tentare di modificare una proprietà su questo valore (ad esempio null.innerHTML) interrompe l’esecuzione dello script. È opportuno verificare l’esistenza dell’elemento prima di operare su di esso. ### Se il contenuto inserito proviene da fonti non controllate Scrivere direttamente in innerHTML un valore ricevuto da un utente o da una richiesta esterna espone la pagina a manipolazioni del markup non previste: il contenuto può includere tag eseguibili invece di semplice testo. In questi casi è preferibile textContent o una procedura di sanificazione del valore prima dell’inserimento; questa categoria di rischio è alla base degli attacchi di tipo Cross-site scripting (XSS) basati sul DOM. ### Se lo script viene eseguito prima che il DOM sia pronto Se uno script cerca un elemento prima che il browser abbia completato il parsing del documento, la ricerca restituisce null anche se l’elemento esiste nel markup, semplicemente perché non è ancora stato processato. Collocare lo script dopo il contenuto, oppure eseguirlo dopo l’evento di caricamento del documento, evita questo tipo di errore. Per un approfondimento complessivo sulle tecnologie che compongono il funzionamento di una pagina web, la categoria Sviluppo web e software raccoglie gli approfondimenti correlati. ## Domande frequenti sul Document Object Model ### Cosa significa DOM in JavaScript? DOM è l’acronimo di Document Object Model: in JavaScript indica l’insieme di oggetti, proprietà e metodi che rappresentano la pagina caricata nel browser e che permettono allo script di leggerne e modificarne contenuto, stile e struttura. ### Qual è la differenza tra HTML e DOM? L’HTML è il codice sorgente statico scritto nel file; il DOM è la rappresentazione a oggetti costruita dal browser a partire da quel codice, aggiornabile in tempo reale da JavaScript senza modificare il file originale. ### Come si usa innerHTML in JavaScript? La proprietà innerHTML si legge o si assegna su un elemento selezionato, ad esempio elemento.innerHTML = "testo", per leggere o sostituire il markup interno; va evitata con contenuto proveniente da fonti non controllate per motivi di sicurezza. ### Come si ottiene l’attributo di un elemento in JavaScript? Si utilizza getAttribute("nome") sull’elemento selezionato, che restituisce il valore corrente dell’attributo richiesto; per gli attributi personalizzati con prefisso data- è disponibile anche la proprietà dataset. ### Cos’è un attributo in un elemento HTML? Un attributo è un’informazione aggiuntiva associata a un tag, scritta nella forma nome=”valore” (ad esempio class="intro" o href="pagina.html"), accessibile e modificabile tramite i metodi DOM dedicati. ### Qual è la differenza tra DOM e BOM? Il DOM rappresenta il contenuto della pagina web; il BOM (Browser Object Model) rappresenta il browser stesso, tramite oggetti come Navigator, Location e History, non standardizzati dal W3C. ### Perché si usa il DOM? Il DOM si utilizza perché permette a un linguaggio di scripting di rendere una pagina interattiva: senza questa interfaccia, JavaScript non avrebbe un modo standard per individuare, leggere e aggiornare gli elementi di un documento già caricato. ### Un’API è solo un indirizzo web? No. Un’API è l’insieme di regole e oggetti con cui un programma comunica con un sistema; un indirizzo web può essere il punto di accesso a un’API, ma l’API comprende anche i metodi e le strutture dati disponibili, come nel caso del DOM applicato ai documenti.