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 univocoid
;getElementsByTagName('nome')
: permette di rintracciare un elemento del documento, se presente, basandosi sul valore dato all'attributoname
;
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 nomenome_TAG
, ritorna un riferimento al tag creato;createTextNode('testo')
: crea un node contenente iltesto
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 nodonuovo_nodo
viene aggiunto alla fine dell'array;insertBefore(nuovo_nodo,nodo_da_precedere)
: il nodonuovo_nodo
viene aggiunto prima del nodonodo_da_precedere
;replaceChild(nuovo_nodo,vecchio_nodo)
: il nodonuovo_nodo
sostituisce il nodovecchio_nodo
;removeChild(nodo_da_cancellare)
: il nodonodo_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).
Nessun commento:
Posta un commento