Cos’è esattamente il DOM?

2023/10/24
web

Spesso, dopo averlo nominato e citato più volte in classe arriva il momento in cui mi viene chiesto: “Ma prof, cos’è esattamente il DOM?”. Alcuni studenti infatti non sono sicuri di averlo capito bene. E allora, vediamolo assieme.

L'HTML è il DOM?

Il Document Object Model, cioè il DOM, assomiglia molto all’HTML che scrivi con l’editor, ma non è la stessa cosa: il tuo codice infatti prima di essere trasformato nel DOM viene parsificato dal browser.

Se controlli la sorgente della pagina (CMD+Option+U su Mac, CTRL+U su Windows) potrà sembrarti identico, ma non è così per tutti i casi: non accade ad esempio se lavori con dei template che restituiscono un output differente, o se il tuo HTML viene compresso o modificato.

Meglio comunque se al posto del comando visualizza sorgente utilizzi il DevTools del browser (CMD+Option+I su Mac, CTRL+SHIFT+C su Windows).

Un attimo: il DOM è quello che appare nel DevTools?

La risposta è sì! Quando infatti cotrolliamo il pannello DevTools, ciò che appare è proprio il DOM (o meglio, la sua rapprezentazione visuale).

Scusa, ma è proprio uguale al mio HTML!

Beh, il codice che vedi in fondo è stato creato proprio a partire dal tuo HTML. Ma anche in questo caso ci sono situazioni in cui può essere differente, te ne elenco alcune:

Quando nel tuo HTML ci sono imprecisioni e il browser le corrgge al posto tuo: ad esempio, se hai un elemento <table> e hai dimenticato di infilarci il <tbody> (che è obbligatorio) il browser lo farà per te.
Quando esiste codice JavScript che modifica in output l’HTML.
Se utilizzi Ajax per estrapolare contenuti da altrove e inserirli nella tua pagina, o se carichi dati attraverso dei template lato client: prendi Gmail ad esempio, se visualizzi il codice sorgente vedrai solo un mucchio di script e dati di caricamento, molto diverso da ciò che appare sul tuo schermo!