recuperare nodi


.childNodes

contiene tutta la lista dei nodi figli (é un array)

elemento.childNodes[x]

si usa anche per vedere se un elemento ha dei nodi figli:
if (elemento.childNodes.length> 0){}




.firstChild

restituisce il primo figlio del nodo al quale é applicata

elemento.firstChild coincide con: elemento.childelementos[0]




.lastChild

restituisce l'ultimo figlio del nodo al quale é applicata

elemento.lastChild coincide con: elemento.childelementos[length-1]




.nextSibling

restituisce il nodo che segue quello al quale é applicato

elemento.nextSibling




.previousSibling

restituisce il nodo precedente quello al quale é applicato

elemento.previousSibling




.parentNode

restituisce il nodo che contiene quello al quale é applicato (padre)

elemento.parentNode




.nodeValue

restituisce il valore del nodo, permetta anche la modifica del valore.
Il valore di ritorno dipende dal tipo di nodo in questione, in particolare, per i tag il valore ritornato é null, mentre é il testo per i nodi di testo.

elemento.nodeValue

esempio: sostituzione testo
function modifica_nodo_testo(){

if(document.getElementsByTagName) {
div = document.getElementById("tabella_esempio");
cella1 = div.getElementsByTagName("TD").item(0);
cella1.firstChild.nodeValue = "Cambiamo il testo";}
}


modificare nodi


.appendChild

inserisce un nuovo nodo alla fine della lista dei figli del nodo al quale é applicato

elemento.appendChild(nodo)

esempio:
function inserisci_frase(){

if(document.getElementById && document.createTextelemento){
frase = document.createTextelemento("Iniziamo con un esempio semplice");
document.getElementById("par_pre").appendChild(frase);}
}

bisogna fare attenzione se si costruisce una tabella in questa maniera dinamica, in quanto bisgona seguire un ordine preciso di costruzione, altrimenti non funziona (vedi script menu a cascata):
  1. table
  2. tbody
  3. tr
  4. td
  5. ....



.insertBefore

consente di inserire un nuovo nodo nella lista dei figli del nodo al quale é applicato il metodo, appena prima di un nodo specificato

elemento.insertBefore(nodo_inserito,nodo_esistente)

esempio: inserisco un testo prima
function inserisci_prima(){


if(document.getElementsByTagName && document.createTextNode){
div = document.getElementById("tabella_esempio");
prefisso = document.createTextNode("Questa è la ");
cella2 = div.getElementsByTagName("TD").item(1);
testo_esistente = cella2.firstChild;
cella2.insertBefore(prefisso,testo_esistente);}


else alert("metodo W3C non supportato");
}


esempio: creo una lista e la inserisco
function lista(){


if(document.getElementsByTagName && document.createTextNode){
creiamo i nuovi elementi
Olist = document.createElement("ol");
voce1 = document.createElement("li");
voce2 = document.createElement("li");
testo1 = document.createTextNode("Prima creiamo gli elementi");
testo2 = document.createTextNode("Poi li inseriamo al volo nella pagina");

colleghiamoli tra loro in modo da formare il nostro gruppo di elementi ricostruito
voce1.appendChild(testo1);
voce2.appendChild(testo2);
Olist.appendChild(voce1);
Olist.appendChild(voce2);

inseriamola nel punto che desideriamo
div = document.getElementById("lista_esempio");
testo_esistente = div.firstChild;
div.insertBefore(Olist,testo_esistente);}


else alert("metodo W3C non supportato");
}




.replaceChild

consente di inserire un nuovo nodo al posto di un altro nella struttura della pagina

elemento.replaceChild(nuovo_nodo,vecchio_nodo)

esempio:
function rimpiazza(){


if(document.getElementsByTagName && document.createTextNode){
div = document.getElementById("tabella_esempio");
cella1 = div.getElementsByTagName("td").item(0);
cella1.replaceChild(document.createTextNode("Testo rimpiazzato"),cella1.firstChild);}
}




.removeChild

elimina e restituisce il nodo specificato dalla lista dei figli del nodo al quale é applicato

elemento.removeChild(nodo_da_rimuovere)




.cloneNode

permette di duplicare un nodo già esistente, offrendo la possibilità di scegliere se duplicare il singolo nodo, o anche tutti i suoi figli

elemento.cloneNode(true/false) 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)

esempio: creo una lista e poi la clono facendo poi delle modifiche
function lista_piu(){

if(document.createTextNode && document.getElementsByTagName){
Olist = document.createElement("ol");
voce1 = document.createElement("li");
voce1.setAttribute("style","font-size:13px;"); si poteva mettere anche voce1.style.fontSize = "13px"
voce1.setAttribute("class","classe_esempio_li");
under = document.createElement("strong");
voce1.appendChild(under);
under.appendChild(document.createTextNode("Prima"));
voce1.appendChild(document.createTextNode(" creiamo gli elementi"));

voce2 = voce1.cloneNode(true);

voce2.firstChild.replaceChild(document.createTextNode("Poi"),voce2.firstChild.firstChild);
voce2.replaceChild(document.createTextNode(" li inseriamo al volo nella pagina"),voce2.childNodes[1]);

Olist.appendChild(voce1);
Olist.appendChild(voce2);

div = document.getElementById("lista_esempio");

testo_esistente = div.firstChild;
div.insertBefore(Olist,testo_esistente);}


else alert("metodo W3C non supportato");
}