JavaScript/DOM

Il DOM è una tecnologia standard del W3C per muoversi nella struttura di documenti XML.
In relazione a JavaScript questo è molto interessante, in quanto un documento HTML ben formato è in realtà un documento XML, e tramite il DOM di JavaScript è possibile accedere a qualsiasi elemento nella pagina per modificarne le proprietà o per attivarne i metodi. Il DOM definisce anche un modello oggetto più evoluto del BOM che tratteremo quindi in modo più approfondito.

Per approfondire su Wikipedia, vedi la voce Document Object Model.

BOM vs DOM

Ci si potrebbe a questo punto chiedere dove si sovrappongano il DOM che andremo ad analizzare e BOM che abbiamo appena visto e, soprattutto, perché abbiamo esaminato anche il BOM, nonostante sia meno evoluto.

Il problema sorge in realtà dall'evoluzione dei browser, che hanno creato dei propri standard prima della definizione del W3C. In realtà il DOM non è altro che un'evoluzione del BOM sviluppato inizialmente da browser come Netscape o Internet Explorer con l'avvento di JavaScript.

Solo successivamente il DOM è stato standardizzato, ma si continua ancora oggi ad usare il BOM, per problemi di compatibilità (anche se ormai questi sono praticamente minimi) o anche perché quest'ultimo è più "intuitivo" e non richiede di capire la gerarchia XML della pagina.

La struttura gerarchica di un documento

Per poter lavorare con il DOM è però necessario capire la struttura ad albero di un documento, perché è su questa che si muove. Questa struttura è astratta e parte dalla gerarchia degli elementi in una pagina.

Prendiamo ad esempio questa pagina HTML:

<html>
<head></head>
<body>
<h1>This is an header</h1>
<p>This is some text</p>
</body>
</html>

È un semplice documento HTML contenente un'intestazione e un paragrafo. La sua struttura ad albero sarà la seguente:

Ogni elemento, di qualsiasi tipo esso sia, occupa una posizione ben definita. Ogni elemento nella struttura ad albero viene chiamato "nodo", e rappresenta nel modo più astratto ciascun elemento della pagina.
Ad ogni nodo si può associare un nodo genitore, tranne che per il nodo radice del documento, nel nostro caso <html>. Ogni nodo può avere dei nodi figli (ad esempio l'intestazione e il paragrafo sono figli dell'elemento <body> e dei nodi fratelli (ad esempio <p> è fratello di <h1>).

Questa è un'altra differenza dal BOM: non esiste più un oggetto per ogni elemento nella pagina, ma esiste un oggetto astratto che li rappresenta tutti. Non sarà più quindi necessario studiare singolarmente ogni singolo elemento della pagina, ma solo i tipi di nodi più importanti.

Vari tipi di nodo

L'oggetto Node è quindi, come abbiamo detto, il modo più astratto per indicare un elemento della pagina; per i diversi tipi di elemento esistono poi oggetti più specifici, che sono delle estensioni dell'oggetto Node; tra i più importanti troviamo:

Document è un oggetto radice del documento. L'oggetto window.document è un'istanza di questo oggetto.
Element è un nodo che rappresenta un elemento HTML (come <p>)
Text è un nodo di testo, che costituisce l'ultimo nodo figlio di un elemento (ad esempio This is some text è un nodo di testo)