2. AJAX for dummies 2: il DOM
Continua da qui.
Il DOM(Document Object Model) è una rappresentazione logica della pagina HTML. E’ assimilabile ad un albero i cui nodi sono i tag.
E’ possibile visualizzare il DOM delle pagine con Mozilla Firefox, dal menù Strumenti – DOM Inspector, come nell’esempio.
 |
 |
Quindi gli elementi dell’albero sono di due tipi: i tag, che hanno degli attributi e possono avere figli, e i textNode, che rappresentano il testo contenuto tra i tag.
Ogni tag è un elemento, recuperabile tramite le funzioni dell’oggetto document:
getElementById() |
(es: var elem = document.getElementById(id) ) |
getElementsByTagName() |
(es: var elem = document.getElementsByTagName(tagname)[0] – E’ un array) |
E’ possibile creare nuovi elementi:
createElement(tagname) |
(es: var elem = document.createElement("div")) |
createTextNode(testo da inserire) |
(es: var textnode = document.createTextNode("Hello World!")) |
Ma questi non saranno inseriti nel DOM, finchè non verranno chiamati i metodi opportuni.
Anche gli elementi hanno dei metodi che sono:
getElementsByTagName() |
(es: var elem = elem2.getElementsByTagName("td")[0], identico a document, restringe la ricerca degli elementi tra i figli dell’elemento) |
setAttribute,getAttribute,removeAttribute |
(gestione degli attributi dei tag, nell’esempio la tabella aveva gli attributi width, border, cellpadding, cellspacing) |
C’è inoltre un attributo speciale, ovvero il nome del tag, che si recupera direttamente: elem.tagName.
Parentele: ogni nodo quindi ha una relazione con gli altri nodi dell’albero. Queste parentele sono utilizzabili per navigare tra i nodi, utilizzando alcune proprietà degli elementi:
childNodes,
firstChild,
lastChild,
nextSibling,
previousSibling,
parentNode
Nell’esempio potremmo applicare il seguente codice Javascript:
var body = document.getElementsByTagName("body")[0];
var array_figli = body.childNodes; //è un array da due elementi, i tag <p> e <table>
var tag_p = array_figli.firstChild;
var tag_table = array_figli.lastChild;
var tag_head = body.previousSibling;
var elem = body.nextSibling; //restituisce null
var tag_html = body.parentNode;
Inoltre abbiamo i metodi:
hasChildNodes() |
(restituisce true o false) |
appendChild() |
(es: body.appendChild(document.createElement("div")), crea un tag <div> vuoto, e lo inserisce all’interno del <body>, nell’ultima posizione) |
insertBefore() |
(inserisce prima, sullo stesso livello gerarchico) |
replaceChild() |
(elem.replaceChild(elem2), sostituisce l’elemento nell’albero, i figli dell’elemento sostituito, se non recuperati in precedenza, vanno persi) |
removeChild() |
(elem.removeChild(another_elem), rimuove l’elemento) |
cloneNode(true/false) |
(restituisce un elemento identico, il booleano indica se copiare anche i figli) |
Appendice: innerHTML
Nell’esempio della prima parte, viene usato innerHTML. Questa proprietà, accessibile sia in lettura che in scrittura, è la rappresentazione testuale di tutto il contenuto di un elemento.
Domenica, 6 Gennaio 2008 a 17:07
[...] qualunque Yet another java addicted space monkey on the road « 0. Presentazioni 2. AJAX for dummies 2: il DOM [...]