Cosa non è il DOM?

Il Document Object Model (o più semplicemente, il DOM), è un'interfaccia che sostanzialmente rappresenta la struttura di una pagina Web. Grazie al DOM, possiamo sia attraversare l'intero codice HTML (comprensivo di head e body), sia manipolare in real-time la sua struttura, alterandola a nostro piacimento. Attraverso il Critical Rendering Path, il browser è in grado di replicare una versione "virtuale" dell'HTML, attraverso due step fondamentali: il parsing del documento, per contestualizzare il rendering, e la fase di rendering vera e propria.

Il risultato del primo step viene comunemente chiamato "rendered tree", una rappresentazione degli elementi HTML e dei relativi stili. Per questo motivo, il browser ricava due rappresentazioni: CSSOM (CSS Object Model), ovvero la rappresentazione degli stili associati agli elementi (a qualsiasi grado di profondità) e il DOM che, come abbiamo anticipato, è la rappresentazione degli elementi di pagina.

Sebbene cosa rappresenta il DOM risulti molto chiaro, specialmente agli sviluppatori più esperti, a volte non è altrettanto chiaro cosa non sia il DOM. Anche se il DOM viene prodotto a partire dall'HTML, infatti, non è detto che queste due strutture siano identiche.

Quando l'HTML non è valido, ad esempio, il DOM cerca in tutti i modi di "sistemare" le anomalie rilevate, dato che è di fatto un'interfaccia per HTML valido. Se lo sviluppatore omette i tag head e body, includendo il testo nell'elemento radice, il DOM corregge la struttura inserendo le posizioni corrette.

Ne consegue che DOM e documento divergono: è sempre bene avere un HTML validato per lavorare correttamente e in maniera precisa con il DOM. Inoltre, dato che attraverso il motore JavaScript noi possiamo alterare il documento HTML in tempo reale, creando documenti ed innestandoli (come nell'esempio successivo) avremo un aggiornamento del DOM ma non del documento plain HTML:

var div = document.createElement("div");
var text = document.createTextNode("ciao");
div.appendChild(text);
document.body.appendChild(div);

Infine, il DOM non è ciò che viene analizzato dalla suite DevTools, anche se quest'ultima produce l'approssimazione più corretta. DevTools contiene informazioni addizionali che non sono presenti nel DOM, come ad esempio gli pseudo-elementi CSS prodotti da selettori. quali ::after e ::before, che sono invece parte del CSSOM.