JavaScript: DOM, Document Object Model

DOM realizza una rappresentazione ad oggetti di un documento HTML secondo le specifiche dettate dal W3C. Disporre di un modello ad oggetti del documento permette di realizzare in maniera assai più semplice la manipolazione degli elementi che lo compongono. Il DOM, pertanto, favorisce il DHTML (l'html dinamico)! Come spesso accade non tutti si adeguano subito agli standard. Nel caso del DOM, poi, alcuni browser ripropongono un loro modello ad oggetti del documento che spesse volte differisce dalle specifiche del W3C. Questo causa non pochi problemi a chi sviluppa pagine web poiché l'accesso a un elemento può avvenire, allora, in modo totalmente differente da quello previsto dal designer. JavaScript non implementa un modello a oggetti del documento, come alcuni pensano. Questo, come già detto poco fa, spetta ai browser. JavaScript offre, invece, un set di istruzioni per accedere agli elementi del documento, per manipolarne i contenuti e per aggiungerne altri. La buona riuscita di queste operazioni dipende proprio dall'aderenza che esiste fra il modello DOM implementato nella logica del browser e quello standard descritto dal W3C. Non a caso, quando si vuole verificare l'esistenza di un oggetto si procede solitamente invocando il metodo JavaScript e verificando quindi l'esito della chiamata. Se alcuni oggetti esistono allora il browser sta adottando il modello ad oggetti del W3C!

Per muoverci nel modello a oggetti del documento invocando la giusta funzione occorre fare un'importante distinzione, quella cioè fra element e node. Entrambi definiscono una componente del documento, più precisamente: con element (da ora in poi elemento) si intende un tag contenitore (come ad esempio il tag p per i paragrafi); con node (da ora in poi nodo) si intende, invece, un tag finale della struttura a oggetti. Un elemento può contenere altri elementi. La stessa cosa non può invece avvenire per un nodo. L'oggetto document contiene tutti gli elementi e i nodi della pagina.

JavaScript mette a disposizione due comode funzioni per rintracciare un elemento della pagina:

• getElementById('id_elemento'): permette di rintracciare un elemento del documento, se presente, basandosi sul valore dato all'attributo univoco id;
• getElementsByTagName('nome'): permette di rintracciare un elemento del documento, se presente, basandosi sul valore dato all'attributo name;

A differenza di getElementById che restituisce un solo valore (se presente), la funzione getElementByTagName ritorna un array con gli elementi trovati! L'accesso a un elemento dell'array può poi avvenire sia secondo le regole previste da JavaScript (e quindi con array[indice]), oppure in base a una nuova sintassi introdotta dal W3C: array.item(indice).

Le proprietà e i valori delle proprietà degli elementi possono essere manipolate con i seguenti metodi:

• getAttribute(nome_proprietà);
• setAttribute(nome_proprietà,valore_proprietà);
• removeAttribute(nome_proprietà);

La gestione dei nodi è assai più articolata, l'intero set di nodi contenuti in un elemento può essere ricavato attraverso la funzione childNodes che ritorna un array di nodi! Con firstChild e lastChild accediamo rispettivamente al primo e all'ultimo nodo dell'array. Per spostarci lungo la gerarchia dei nodi disponiamo dei metodi nextSibiling, previousSibiling e parentNode che ritornano rispettivamente il fratello minore, maggiore e il padre del nodo.

Per creare nuovi elementi e nuovi nodi disponiamo dei metodi:

• createElement('nome_TAG'): crea un elemento con nome nome_TAG, ritorna un riferimento al tag creato;
• createTextNode('testo'): crea un node contenente il testo passato alla funzione, ritorna un riferimento al nodo creato;

Come facciamo ad aggiungere nuovi nodi al documento?

Ecco una lista di funzioni JavaScript per la gestione dei nodi:

• appendChild(nuovo_nodo): il nodo nuovo_nodo viene aggiunto alla fine dell'array;
• insertBefore(nuovo_nodo,nodo_da_precedere): il nodo nuovo_nodo viene aggiunto prima del nodo nodo_da_precedere;
• replaceChild(nuovo_nodo,vecchio_nodo): il nodo nuovo_nodo sostituisce il nodo vecchio_nodo;
• removeChild(nodo_da_cancellare): il nodo nodo_da_cancellare viene eliminato;

A questo link trovate le specifiche per il modello DOM, ormai giunto alla terza revisione (e per questo motivo detto DOM Level 3).