Document Object Model

Cos'e' il Document Object Model?

Il DOM (Document Object Model) e' un sistema per individuare, attraverso un 'naming system' gerarchico, tutti gli elementi di una pagina, come immagini, FORMs, proprieta' CSS, rendendoli accessibili ad un linguaggio di script come Javascript.

 

Un po' di storia del DOM.

Nei primi browsers JavaScript, il DOM dava accesso ad un numero ridotto di oggetti (e relativi attributi): FORMs, FRAMEs, piu' tardi immagini.
Con I.E. 4 sono diventati accessibili tutti gli oggetti della pagina, mentre Netscape Navigator 4 non li comprende ancora tutti.
 

In pratica.

Nel DOM, esiste un documento che rappresenta tutta la pagina, e si chiama:
  • document;
Tutti gli oggetti contenuti nella pagina si ramificano partendo dal 'document'.
Le ramificazioni vengono separate dai punti ('.').
Ad esempio, se abbiamo nella nostra pagina una immagine chiamata 'bob', vi possiamo accedere con la notazione:
  • document.bob;
Non tutti gli oggetti di una pagina aquisiscono automaticamente il loro nome, come fa la pagina stessa ('document'); per battezzare una immagine, si fa cosi':
  • <IMG SRC = "bobby.gif" NAME = "bob">
Un oggetto si ramifica ulteriormente in un altro oggetto, oppure nelle sue proprieta' html.
Un oggetto html si ramifica in genere nelle proprieta' corrispondenti agli attributi specificati nel tag. Questo e' alla fine lo scopo del DOM: rispecchiare il 'markup' della pagina.
Possiamo fare in modo che il tag dell'esempio visualizzi una immagine diversa:
  • document.bob.src = "notbobby.gif";
Non tutti gli oggetti html discendono direttamente da 'document'; in particolare, gli elementi di una FORM (campi di input, pulsanti, ecc.) discendono da un oggetto FORM prima che da 'document'.
Se abbiamo una FORM di nome 'frm' che contiene un campo di input di nome 'txt', possiamo accedere a quest'ultimo con:
  • document.frm.txt;
Siccome, come abbiamo visto, la maggior parte degli oggetti html ha una proprieta' DOM per ciascun attributo nel tag, e siccome il valore di un campo di input e' contenuto nell'attributo VALUE, possiamo accedervi con
  • document.frm.txt.value;
 

Conclusioni

Una volta compreso il funzionamento generale del DOM, possiamo utilizzare le guide di riferimento per conoscere gli oggetti html ed i loro attributi/proprieta'.
Sebbene W3C stia cercando di risolvere il problema, esistono differenze fra i DOM di un browser e quelli di un altro; si potrebbe scegliere, ad esempio, di accedere soltanto agli oggetti riconosciuti dai principali browser (I.E. 4 e N.N.4) (esistono tabelline di riferimento utili allo scopo).
© www.webcoder.com

Per approfondire:
www.w3c.org/DOM

Torna a indice Guide