Guida introduttiva al Document Object Model ( I.D. Falconi ~ 27.02.13) Il DOM (Document Object Model) è un modello che descrive come i diversi oggetti di una pagina web sono collegati tra loro. Tecnicamente è un API (Application Programming Interface), ovvero, un'interfaccia per la programmazione di applicazioni; in pratica è un insieme di funzioni, metodi e proprietà, che i programmi possono richiamare per interagire, in modo trasparente, col sistema sottostante. Il DOM è un'api definita dal W3C, indipendente dalla piattaforma, che descrive la struttura di un documento HTML (e XML), tramite il quale i costruttori di pagine web possono accedere a tutti gli elementi della pagina stessa. Questo, ovviamente, non significa che i produttori di browser lo rispettino. Da qui nascono i problemi relativi alla diversa interpretazione dei browser. Il DOM non è una parte di JavaScript. JavaScript è solo un modo per accedere al DOM, e non è l'unico. Cerchiamo ora di capire nel dettaglio come il DOM struttura una pagina attraverso un semplice esempio: <html> <head> <title>il DOM</title> <head> <body> <p id="paragrafo1">pagina di <span id= evidenzia >PROVA</span> Document Object Model</p> </body> </html> Il DOM rappresenta una generica pagina web (il documento) tramite un albero, secondo le relazioni che legano e collegano i vari elementi presenti nel documento stesso, evidenziandone le parentele e le caratteristiche: in sostanza ogni elemento presente nella pagina, ogni tag (come <title>), ogni testo (come "Pagina di") è un nodo.
I nodi possono anche avere attributi e proprietà. Inoltre un nodo può contenere altri nodi, in questo caso si parla più propriamente di nodo elemento. Nell esempio, il nodo elemento html ha due figli, head e body. L elemento body ha un figlio, p, che a sua volta ha tre figli, due nodi di testo ( Pagina di e Document Object Model ), e un nodo elemento, span. Quest ultimo ha come figlio un nodo di testo ( PROVA ). Il nodo elemento head ha invece un solo figlio, title, avente a sua volta come figlio il nodo di testo IL DOM. Tramite il DOM sarà possibile accedere e manipolare ogni nodo, aggiungerne di nuovi dinamicamente, ed eliminarne altri già presenti (queste possibilità, ovviamente, sono offerte da tutti i browser che supportano il DOM W3C). Prima di entrare nella descrizione dei principali metodi e proprietà del DOM, definiamo più esattamente la differenza tra elemento e nodo. Un nodo elemento (element) è contraddistinto da un tag. Esso può quindi contenere al suo interno altri elementi ( si pensi al tag TABLE, che può contenere le righe e le celle della tabella stessa, e a loro volta questi possono contenere altri elementi). Il nodo (node) ha un significato più ampio: oltre ad includere nella sua definizione tutti gli elementi, un nodo può essere anche un testo o un attributo. I nodi di testo, a differenza di tutti gli altri nodi, non possono avere attributi e non possono contenere altri nodi.
TAB 1 - Principali tipi di nodo relativi ad HTML NodeType NodeName NodeValue DESCRIZIONE 1 (elemento) nome TAG null Qualsiasi TAG 2 (attributo) nome attributo valore attributo attributo di un elemento 3 (testo) #text testo contenuto frammento di testo di un elemento 8 (commento) #comment testo di commento commento html 9 (documento) #document null oggetto radice 10 (DocumentType) DOCTYPE null specifica DTD 11 (frammento) #document-fragment null Uno o più nodi esterni al documento TAB 2 - Proprietà degli oggetti nodo Proprietà tipo DESCRIZIONE nodename stringa varia a seconda del tipo di nodo (TAB 1) nodevalue stringa varia a seconda del tipo di nodo (TAB 1) nodetype intero Costante che rappresenta ciascun tipo parentnode oggetto Riferimento al contenitore immediatamente più esterno childnodes collection tutti i nodi figli in ordine di codice sorgente firstchild oggetto riferimento al primo nodo figlio lastchild oggetto riferimento all ultimo nodo figlio previoussibling oggetto riferimento al precedente nodo fratello nextsibling oggetto riferimento al successivo nodo fratello attributes NodeMap collection di nodi attributo
L'OGGETTO DOCUMENT document è l'oggetto che contiene tutti gli elementi della pagina. In prima approssimazione, possiamo far corrispondere "document" al tag <html>. Più propriamente, corrisponde a tutto il codice della pagina, anche esterno al tag <html>, come ad esempio la definizione del DOCTYPE. Fatta questa premessa, esaminiamo i principali metodi di document, che si possono dividere tra: metodi per l accesso agli elementi della pagina metodi per la creazione di nuovi elementi Accesso agli elementi della pagina A supporto di questa necessità il DOM fornisce 2 metodi: getelementbyid() getelementsbytagname() getelementbyid() - permette di recuperare l'elemento caratterizzato univocamente dal valore del proprio attributo ID. In particolare restituisce un riferimento all'elemento in questione. elemento=document.getelementbyid(idelemento) - idelemento è il valore (unico nella pagina) dell'attributo ID dell'elemento che si vuole recuperare. getelementsbytagname() - permette di recuperare l'insieme degli elementi caratterizzati dallo stesso tag, organizzati in array, nell'ordine in cui compaiono nel codice della pagina. listaelementi=document.getelementsbytagname(nometag) - nometag è il nome del tag di cui si vuole recuperare la lista. L'array può, ovviamente, essere scandito con la consueta sintassi, ovvero usando le parentesi quadre: listaelementi[indice]. Il W3C fornisce un metodo alternativo per scorrere le liste dei nodi: listaelementi.item(indice). Questa stessa sintassi si può applicare a tutti gli array di nodi che incontreremo. Si utilizzerà uno o l altro dei due metodi getelementbyid e getelementsbytagname a seconda che si voglia recuperare un elemento particolare oppure una famiglia di elementi con le stesse caratteristiche.
Creazione di nuovi elementi Passiamo ora ai metodi di document che si occupano di creare nuovi elementi della pagina: createelement() createtextnode() createelement() - permette di creare un nuovo elemento di qualunque tipo. Ritorna un riferimento al nuovo elemento creato. nuovoelemento = document.createelement(nometag) - nuovoelemento è la variabile che conterrà il riferimento al nuovo elemento creato - nometag è il nome del Tag di cui si vuole creare un nuovo elemento createtextnode() - permette di creare un nuovo nodo di testo. Questi sono nodi particolari, che non possono contenere altri nodi, né possono avere attributi, sono quindi nodi terminali (foglie). In particolare, questo metodo, restituisce un riferimento al nuovo nodo di testo creato. nodotesto = document.createtextnode(testo) - nodotesto è la variabile che conterrà il riferimento al nuovo nodo di testo - testo è la stringa di testo da inserire nel nuovo nodo In realtà il nodo non viene visualizzato: resterà nella memoria del browser fino alla chiamata di un opportuno metodo di inserimento nella pagina. Gestione dei nodi elemento I metodi per element, consentono per lo più di gestire e manipolare le caratteristiche di ogni singolo elemento, come recuperare, impostare e rimuovere gli attributi dell'elemento stesso. getelementsbytagname() - stesso metodo visto per document, con identica sintassi e semantica. In questo caso naturalmente ritorna la lista degli elementi contenuti all'interno di un certo elemento. Possiamo pensare all elemento come una sottoradice e riapplicare il modello visto finora. setattribute() - permette di creare un nuovo attributo per l'elemento specificato. Qualora l'attributo sia già presente, il metodo ne sovrascrive il valore. element.setattribute(nomeattributo,valoreattributo) - nomeattributo è la stringa col nome dell'attributo che deve essere inserito o modificato - valoreattributo è la stringa col valore da assegnare all'attributo specificato
getattribute() - recupera il valore di un attributo dell'elemento. element.getattribute(nomeattributo) - nomeattributo è la stringa col nome dell'attributo di cui si vuole recuperare il valore removeattribute() - rimuove l'attributo passato come parametro. Qualora l'attributo abbia un valore di default, sarà questo il nuovo valore assunto dall'attributo. element.removeattribute(nomeattributo) - nomeattributo è la stringa col nome dell'attributo che si vuole eliminare tagname - restituisce il nome del tag dell'elemento associato. nometag = element.tagname I nodi Come già anticipato, nella definizione di node ricadono non solo gli elementi, che possono a loro volta avere elementi figli o attributi, ma anche particolari componenti di una pagina, come il testo o i commenti. Questi ultimi, non potendo avere attributi né includere altri elementi, non sarebbero raggiungibili con i metodi visti finora. In questa sezione verranno mostrati metodi e proprietà proprie di ogni node, con i quali è possibile scorrere la struttura della pagina per recuperare e manipolare ogni nodo.
Proprietà childnodes collection contenente l insieme dei nodi figli. Un nodo figlio (child) è un nodo contenuto in quello considerato ed è quindi nel livello gerarchico immediatamente sottostante. Qualora il nodo non possegga figli, la proprietà restituisce un array vuoto. arrayfigli = node.childnodes firstchild primo figlio del nodo al quale è applicata. Corrisponde all'elemento di indice 0 di childnodes. Se il nodo non ha sottonodi restituisce null. nodofiglio = node.firstchild // equivalente node.childnodes[0] lastchild ultimo figlio del nodo al quale è applicata. Corrisponde all' ultimo elemento di childnodes. Se il nodo non ha sottonodi restituisce null. nodofiglio = node.lastchild // equivalente node.childnodes[node.childnodes.length-1] nextsibling nodo adiacente successivo a quello al quale è applicato. Se il nodo non ha "fratelli minori", la proprietà restituisce null. nodosuccessivo = node.nextsibling previoussibling nodo adiacente precedente a quello al quale è applicato. Se il nodo non ha "fratelli maggiori", la proprietà restituisce null. nodoprecedente = node.previoussibling parentnode nodo padre di quello al quale è applicato. Il nodo document è il solo all interno della pagina a non avere padre e, per esso, la proprietà restituisce null. nodopadre = node.parentnode Esistono però altri casi in cui il parentnode è nullo. Si pensi ad esempio al nodo di testo creato in precedenza. In generale, qualsiasi nodo, finché non sarà inserito nella struttura gerarchica della pagina, non avrà alcun nodo padre.
nodevalue valore del nodo. Il valore di ritorno dipende dal tipo di nodo in questione. In particolare, per i tag il valore ritornato è null, mentre per i nodi di testo è il testo. In quest'ultimo caso la proprietà è read/write, cioè consente non solo di leggere il testo, ma anche di modificarlo. valore = node.nodevalue Metodi haschildnodes permette di verificare se un nodo possegga figli oppure no. Restituisce un valore booleano relativo al risultato della verifica: se il nodo contiene altri nodi restituisce true altrimenti false. node.haschildnodes() I prossimi metodi sono finalizzati ad inserire o eliminare in maniera mirata gli elementi dalla struttura gerarchica della pagina. appendchild inserisce un nuovo nodo alla fine della lista dei figli del nodo al quale è applicato. node.appendchild(nodo) nodo è il nodo che si vuole inserire insertbefore insersce un nuovo nodo nella lista dei figli del nodo al quale è applicato il metodo, appena prima di un nodo specificato. node.insertbefore(nododainserire,nododiriferimento) nododainserire è il nodo che si vuole inserire nella lista dei figli di "node" nododiriferimento è il nodo della lista dei figli di "node" prima del quale si vuole inserire il nuovo nodo. replacechild inserisce un nuovo nodo al posto di un altro nella struttura della pagina. node.replacechild(nuovonodo,vecchionodo) nuovonodo è il nuovo nodo che si vuole inserire al posto del vecchio vecchionodo è il nodo che si vuole rimpiazzare con il nuovo
removechild elimina e restituisce il nodo specificato dalla lista dei figli del nodo al quale è applicato. node.removechild(nododarimuovere) nododarimuovere è il nuovo nodo che viene rimosso e restituito dal metodo Spesso può essere utile poter duplicare un nodo, con tutti i suoi attributi, e tutti i suoi figli senza dover ripercorrere tutti i passi che sono serviti per la sua creazione. A questo scopo si utilizza il seguente metodo: clonenode duplica un nodo già esistente, offrendo la possibilità di scegliere se duplicare il singolo nodo, o anche tutti i suoi figli. Dopodiché il metodo ritorna il nodo clone. node.clonenode(figli) figli (true false) è un valore booleano che determina se clonare tutti i figli insieme al nodo al quale è applicato il metodo (true), oppure se clonare il solo nodo (false)
Gestione degli spazi (CR LF TAB) nel DOM Alcuni browser considerano gli spazi come nodi di testo. Si consideri l esempio che segue: <h2>lista bevande</h2> <ul> <li>birra</li> <li>vino</li> </ul> Firefox, rappresenta il codice con la seguente struttura: H2 o #text (Lista bevande) #text (line-break) UL o #text (line-break and tab) o LI #text (birra) o #text (line-break and tab) o LI #text (vino) o #text (line-break) Internet Explorer, invece, ignora gli spazi: H2 UL o o o #text (Lista bevande) LI #text (birra) LI #text (vino) Possono insorgere complicazioni quando si utilizzano metodi che ricorrono alla relazione diretta fra i nodi, come firstchild o nextsibling. Per esempio, il primo figlio di <ul>, in IE è il primo <li>, mentre in FF è un nodo di testo contenente uno spazio. Le principali tecniche per evitare riferimenti errati sono: fare ricorso a riferimenti basati su collection: getelementsbytagname('li').item(0) invece che firstchild Saltare i nodi di testo contenenti spazi var item = list.firstchild; while(item.nodename == '#text') { item = item.nextsibling; }
Gestione eventi All interno di un browser si verificano diversi tipi di eventi, ovvero, in generale, le azioni dell'utente sul documento. Alcuni di quelli più comuni riguardano il comportamento del mouse, della tastiera e degli elementi dei form. click dblclick evento mouseover mouseout Keydown keypress keyup load unload resize scroll click e doppio-click del mouse descrizione puntatore entra nell area di un elemento puntatore esce dall area di un elemento puntatore fasi successive della pressione di un tasto: mentre si preme, premuto, rilascio immediatamente dopo il caricamento dell elemento immediatamente prima della fase di scaricamento dell elemento nella fase di ridimensionamento nella fase scorrimento del contenuto di un elemento alcuni eventi sono trattati in maniera diversa dai vari browser. L esecuzione di una determinata serie di azioni al verificarsi di un evento si ottiene progettando delle apposite funzioni dette tecnicamente event handlers e associandole all evento. Tale operazione può essere compiuta in vari modi: modalità tradizionale ricavata l id dell elemento e definita la funzione, si associa la funzione all evento (registrazione dell evento) tramite dot notation elemento.onclick=event_handler esempio: <input type= button id= test name= test value= TEST > <script type= text/javascript > function avvisa() {alert( test OK );} //event handler document.getelementbyid( test ).onclick=avvisa; </script> Occorre notare che l evento click viene identificato tramite il parametro onclick. Questo semplice modo di gestire gli eventi è sufficiente per la maggior parte delle
esigenze, ma esiste un metodo più complesso in grado di associare ad un evento più di una funzione. Modalità DOM W3C ricavata l id dell elemento e progettata la funzione, si associa la funzione all evento (registrazione) tramite il metodo addeventlistener dell elemento. elemento. addeventlistener( evento,event_handler,cattura) esempio: <input type= button id= test name= test value= TEST > <script type= text/javascript > function avvisa() {alert( test OK );} //event handler document.getelementbyid( test ). addeventlistener('click', avvisa, false); </script> Il terzo parametro, booleano, specifica se l evento deve essere catturato o se deve essere passato agli elementi contenitori. NOTA: tale metodo non è supportato dalle versioni di IE precedenti alla 9, per le quali Microsoft ha implementato il metodo attachevent. elemento.attachevent('onevento', event_handler); I due metodi hanno una sintassi diversa, ad esempio quello del W3C si riferisce all evento con il suo nome e non con la sua proprietà (quindi senza il prefisso on), e prevede il terzo parametro. Per le versionisuccessive alla 9, il documento deve comunque riportare la specifica <!DOCTYPE html> Rimozione event handler Oltre ad aggiungere event handler ad un evento, possiamo toglierle: elemento.removeeventlistener( evento,event_handler,cattura) NOTA: tale metodo non è supportato dalle versioni di IE precedenti alla 9, per le quali Microsoft ha implementato il metodo detachevent. elemento.detachevent('onevento', event_handler); Un esempio di applicazione potrebbe essere l attivazione one-shot di un event handler.
Esempi applicativi DOM Aggiunta dinamica di un nuovo paragrafo in fondo alla pagina //crea in memoria un nuovo elemento <p> var nuovopar=document.createelement("p"); // assegnazione id nuovopar.setattribute("id","newp"); // oppure: nuovopar.id="newp"; // per aggiungere il testo, bisogna creare un nuovo nodo di testo e // appenderlo, come figlio, al paragrafo var nuovotxt=document.createtextnode( paragrafo creato dinamicamente ); nuovopar.appendchild(nuovotxt); // Il nuovo elemento paragrafo è pronto per essere inserito nel documento. // scegliamo di aggiungerlo in fondo alla pagina, come ultimo figlio del <body> var pagina=document.getelementsbytagname("body"); pagina[0].appendchild(nuovopar); // oppure: document.body.appendchild(nuovopar); Aggiunta dinamica di una nuova tabella (2 righe, 4 colonne) // riferimento a body var body = document.getelementsbytagname("body")[0]; // crea un elemento <table> e un elemento <tbody> var tbl = document.createelement("table"); var tblbody = document.createelement("tbody"); // crea le righe for (var r = 0; r < 2; r++) { // crea l elemento <tr> var row = document.createelement("tr"); for (var c = 0; c < 4; c++) { // crea un elemento <td> e un nodo di testo, appende il nodo di testo // alla cella e appende la cella in fondo alla riga var cell = document.createelement("td"); var celltext = document.createtextnode("cella riga "+r+", colonna "+c); cell.appendchild(celltext); row.appendchild(cell); } // appende la riga in fondo a tbody tblbody.appendchild(row); } // appende tbody alla tabella tbl.appendchild(tblbody); // appende la tabella al body body.appendchild(tbl); // imposta id a tab1 tbl.setattribute("id", "tab1");
Aggiunta dinamica di una nuova riga in fondo ad una tabella esistente var tab= document.getelementbyid("tab1"); var tbody=tab.firstchild; var lastrow=tbody.lastchild; var nuovariga=lastrow.clonenode(true); for (var i=0;i<nuovariga.childnodes.length;i++) nuovariga.childnodes[i].firstchild.nodevalue= X ; tbody.appendchild(nuovariga);