http://www.jsdir.com/tutorials/
|
ELEMENT_NODE |
1 |
|
ATTRIBUTE_NODE |
2 |
|
TEXT_NODE |
3 |
|
CDATA_SECTION_NODE |
4 |
|
ENTITY_REFERENCE_NODE |
5 |
|
ENTITY_NODE |
6 |
|
PROCESSING_INSTRUCTION_NODE |
7 |
|
COMMENT_NODE |
8 |
|
DOCUMENT_NODE |
9 |
|
DOCUMENT_TYPE_NODE |
10 |
|
DOCUMENT_FRAGMENT_NODE |
11 |
|
NOTATION_NODE |
12 |
|
|
|
|
attributes[] |
array degli attributi
dell'elemento |
|
item(n) |
metodo per raggiungere un elemento nella nodeList |
|
splitText(dove) |
divide il testo al carattere
specificato dal numero. Il nodo prende il valore della prima parte , il
nodo fratello creato prende la seconda parte |
|
specified |
asscociato ad attributes specifica se
l'attributo ha un valore con true altrimenti false |
|
data |
restituisce il testo di un
nodeText |
|
id |
id del nodo (esempio aa.id) |
|
|
|
<html>
<head>
<title>test</title>
<script
language="javascript">
var cc=new Array();
function
normal(quale){
bd=document.getElementById(quale);
qt=bd.childNodes.length;
for(i=0;
i<qt;
i++){
aa=bd.childNodes[i].nodeType;
bb=bd.childNodes[i].data;
if((aa==3)
&& (bb==0)
){
cc[i]=bd.childNodes[i]=bd.childNodes[(i+1)]
}
else
{
cc[i]=bd.childNodes[i]
alert(cc[i].nodeName)
}
}
}
</script>
</head>
<body onLoad="normal('uno')">
<div
id="uno">
nodo testo
<p
align="left">paragrafo1</p>
<p align="left">paragrafo2</p>
<p>paragrafo3</p>
<p>paragrafo4<br>
</p>
</div>
testo
fuori dal div
</body>
</html>
Eliminazione dei nodi in NN6 (realizzato da Paolo
Carena)
Questo è un esempio realizzato da p.carena@TOGLIMItiscalinet.it
per eliminare i nodi nel rilevamento di quelli che a noi interessano in NN6 in
modo da ottenere lo stesso risultato con i due browser.
<html>
<head>
<title>test</title>
<script language="javascript">
bottoneverifica=false
var cc=new Array();
function normal(){
bd=document.body
ni=qt=bd.childNodes.length
alert("numero nodi iniziali = "+qt)
for(i=0; i<qt; i++){
aa=bd.childNodes[i].nodeType;
bb=bd.childNodes[i].data;
if((aa==3) && (bb==0) ){
/*rimuove il nodo se di natura testo privo di contenuto*/
alert("questo lo tolgo fino a quando non scopro a che serve..."+bd.childNodes[i].nodeName);
document.body.removeChild(bd.childNodes[i]);qt-=1
}
else {
cc[i]=bd.childNodes[i]
alert(cc[i].nodeName)
}
}
if(ni!=qt)
alert("se ci sono riuscito ho rimosso "+eval(ni-qt)+" nodi testo
misteriosi");bottoneverifica=true}
</script>
</head>
<body onLoad="normal()">
cc
<p align="left">sssssssssssssssssssssssssss</p>
<p align="left">sssssss</p>
<p> </p>
<p>fffffffffffffffffffffffffffffff</p>
<p>vvvvvvvvvvvvvvvvvvvvvvvvvvvvv<br>
<br>
jjjjjjjjjj</p><form>
<input type=button
onclick=bottoneverifica?normal():alert('aspettalesecuzioneautomatica!')
value="riprova a far girare la funzione per vedere se ha avuto
successo">
</form>
</body>
</html>
Rilevare i nodi figli ( tre livelli) (realizzato da Paolo pippopdATiol.it
)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Visualizza il DOM W3C per IE5+ NS6.</TITLE>
</HEAD>
<BODY id="corpoID" name="corpoName">
<PRE >
/*******************************************
// JAVASCRIPT SOURCE
// Visualizza il DOM W3C.
//
// .Date - Nov 2K
// .Author - pippopd
********************************************
</PRE>
<H1>Visualizza il DOM W3C per IE5+ NS6</H1>
Visualizza in una nuova finestra la gerarchia ad albero dei nodi presenti
nel DOM per i tre livelli sottostanti all'oggetto chiamato.<BR>
Viene inoltre visualizzato il nodeName, nodeValue, ID, name.
<PRE>funzioni:
dom() visualizza tre livelli partendo dall'inizio;
dom(IDogg) IDogg l'ID di un elemento;
dom('',ogg) ogg un oggetto dichiarato con il metodo "classico"
es.:document.body o con il DOM W3C gerarchia
di nodi es.: document.childNodes[0].childNodes[1]
</PRE>
<H3>Browser</H3>
<div id="div1">
<PRE id="pre3ID" name="pre3Name" >
testato con IE 5.0, NS 6
</PRE>
</div>
<H3>Differenze Anomalie</H3>
<PRE id="pre4ID" name="pre4Name" >
NS6 individua come nodi, con nodeValue #test, alcuni spazi vuoti tra tag
Nella richiesta del DOM per un oggetto definito con la gerarchia dei nodi,
per sopperire, non certo in modo assoluto, alla differente interpretazione
degli spazi tra IE5+ e NS6, e' stato inserito un controllo che, nel caso
l'oggetto indicato abbia valore #text verra' preso in considerazione il nodo
fratello successivo
NS6 non indivua l'attributo name di un oggetto
IE5.0 Non individua il nodo #text interno ai tag TITLE e SCRIPT
Non pertinente ma importante.
NS6: un elemento di una tabella scritta con javascript, sembra non ereditare
il colore di sfondo dall'elemento genitore.</PRE>
Per qualsiasi osservazione e/o miglioria <A href=mailto:pippopdATiol.it>pippopdATiol.it<A>
<HR>
<H3>Test</H3>
Visualizza il DOM del <A href="javascript:dom('corpoID')">ID *corpo* (BODY)</A><BR>
Visualizza il DOM del <A href="javascript:dom('',document.body)">oggetto *document.body*</A><BR>
Visualizza il DOM del <A href="javascript:dom('',document.childNodes[1].childNodes[1])">nodo *document.childNodes[1].childNodes[1]* (BODY)</A><BR>
Visualizza il DOM dal <A href="javascript:dom()">primo elemento</A><BR>
<HR>
</BODY>
</HTML>
<SCRIPT LANGUAGE=javascript type="text/javascript">
<!-- // verifica DOM W3C fino a 3 livelli
function dom(IDogg,ogg){
//alert(IDogg+' '+(IDogg.toString().indexOf('object')>=0))
if (IDogg && document.getElementById(IDogg)) obj=document.getElementById(IDogg).childNodes
else if (ogg && ogg.toString().indexOf('object')>=0) {
obj=(ogg.nodeName=="#text")?ogg.nextSibling.childNodes:ogg.childNodes;
}
else obj=document.childNodes;
pippo= new Array;
c=0;
for (i=0;i<obj.length;i++){
if (obj==document.childNodes)
pippo[c]='<TR style="background-color:#808080"><TD style="background-color:#808080">document</TD><TD>'+i+'</TD><TD>'+obj[i].nodeName+'</TD><TD> '+obj[i].nodeValue+'</TD><TD> </TD><TD> </TD></TR>';
else {
valId=(obj[i].id)? obj[i].id:'';
valName=(obj[i].name)? obj[i].name:'';
pippo[c]='<TR style="background-color:#808080"><TD style="background-color:#808080">'+obj[i].parentNode.nodeName+'</TD><TD>'+i+'</TD><TD>'+obj[i].nodeName+'</TD><TD> '+obj[i].nodeValue+'</TD><TD> '+valId+'</TD><TD> '+valName+'</TD></TR>';
}
c++;
if (obj[i].hasChildNodes()){
obj1=obj[i].childNodes;
for (m=0;m<obj1.length;m++){
valId=(obj1[m].id)? obj1[m].id:'';
valName=(obj1[m].name)? obj1[m].name:'';
pippo[c]='<TR style="background-color:#778899"><TD style="background-color:#778899">..+..'+obj1[m].parentNode.nodeName+'</TD><TD>.'+m+'</TD><TD>'+obj1[m].nodeName+'</TD><TD> '+obj1[m].nodeValue+'</TD><TD> '+valId+'</TD><TD> '+valName+'</TD></TR>';
c++;
if (obj1[m].hasChildNodes()){
obj2=obj1[m].childNodes;
for (n=0;n<obj2.length;n++){
valId=(obj2[n].id)? obj2[n].id:'';
valName=(obj2[n].name)? obj2[n].name:'';
pippo[c]='<TR style="background-color:#a9a9a9"><TD style="background-color:#a9a9a9">..+..+..'+obj2[n].parentNode.nodeName+'</TD><TD>..'+n+'</TD><TD>'+obj2[n].nodeName+'</TD><TD> '+obj2[n].nodeValue+'</TD><TD> '+valId+'</TD><TD> '+valName+'</TD></TR>';
c++;
if (obj2[n].hasChildNodes()){
obj3=obj2[n].childNodes;
for (g=0;g<obj3.length;g++){
valId=(obj3[g].id)? obj3[g].id:'';
valName=(obj3[g].name)? obj3[g].name:'';
pippo[c]='<TR style="background-color:#d3d3d3"><TD style="background-color:#d3d3d3">..+..+..+..'+obj3[g].parentNode.nodeName+'</TD><TD>...'+g+'</TD><TD>'+obj3[g].nodeName+'</TD><TD> '+obj3[g].nodeValue+'</TD><TD> '+valId+'</TD><TD> '+valName+'</TD></TR>';
c++;
}
}
}
}
}
}
}
// alert(pippo.length+' '+c)
var aa=window.open('about:blank','nuova');
aa.document.write('<HTML><BODY>');
aa.document.write('<TABLE border=1 width="95%" style="background-color:#7fffd4">');
aa.document.write('<TR style="background-color:#d3d3d3"><TD style="background-color:#d3d3d3">Nodo</TD><TD>n° child</TD><TD>nodeName</TD><TD>nodeValue</TD><TD>IDValue</TD><TD>nameValue</TD></TR>');
for (i=0;i<pippo.length;i++)aa.document.write(pippo[i]);
aa.document.write('</TABLE>');
aa.document.write('<HTML>');
aa.document.write("<hr>");
aa.document.close();
}
// -->
</SCRIPT>
Esempio di javascript DOM1 per IE5 e NN6 (Fabiano - pippopd)
Creazione dinamica di una select in base all'opzione scelta in
un'altra select( IE5.5 NN6)
<script language="javascript">
Lombardia= new Array("* scegli
*","Sondrio","Milano","Lodi","Varese");
Emilia=new Array("* scegli *","Rimini","Parma");
function crea(zz){
if(document.getElementById){
if(zz !=""){
hh=eval(zz);
pp=hh.length;
if(!document.getElementById('nuovo')){
var newElem =document.createElement("select");
newElem.id="nuovo";
document.getElementById('form1').appendChild(newElem)
} else {
ss=document.getElementById('nuovo').childNodes.length;
for (i=0;i<ss;i++) {
se=document.getElementById('nuovo').childNodes
document.getElementById('nuovo').removeChild(se[0])
}
}
for(i=0; i<pp; i++){
var newElem1= document.createElement("option");
newElem1.setAttribute('value',hh[i]);
var newText1 = document.createTextNode(hh[i]);
newElem1.appendChild(newText1) ;
document.getElementById('nuovo').appendChild(newElem1)
}
document.getElementById('nuovo').style.display="inline";
} else{
document.getElementById('nuovo').style.display="none"
}
}
}
</script>
</head>
<body>
<form method="POST" id="form1">
<p><select size="1" name="D1"
onChange="crea(this.options[this.selectedIndex].value)">
<option selected value="">SCEGLI REGIONE</option>
<option value="Lombardia">Lombardia</option>
<option value="Emilia">Emilia</option>
</select></p>
</form>
</body>
</html>