Pierre Perrody

Parcour du DOM (Document Object Model)

Script écrit en 2001, à l'époque ou les frameworks javascript n'existaient pas encore....

FREE ayant désactivé les options cUrl et fopen, ce script ne peux fonctionner sur ce serveur!
Sinon, pour fonctionner, ce script à besoin d'ouvrir une pop-up; il convient donc de désactiver votre bloqueur ou la fonctionalité du navigateur.
D'autre part, si la page testée contient une redirection, cela ne fonctionnera pas.


Le script ci dessous permet d'afficher la structure du DOM d'une page HTML, hors page structurée en frame et redirections!
Il est possible de rajouter ce script en fin de page (code source) pour voir la structure.
Sinon, tapez l'adresse de la page ci dessous et en appuyant sur envoyer.

<script type="text/javascript" name="functionsALTI">
<!--
if (document.all) dist=-15;
else dist=-5;
function NhasC(c) {
this.collec=c;
if (arguments.length==1) this.addTexte="";
else this.addTexte=arguments[1];
}
NhasC.prototype.attributs=function () {
   if(this.children[this.i].attributes.length>0) {
              gj=b+10;
              cv=0;
      for (j=0;j<this.children[this.i].attributes.length;j++) {
              if (this.children[this.i].attributes[j].nodeValue!=null && this.children[this.i].attributes[j].nodeValue!="" && this.children[this.i].attributes[j].nodeName!="contentEditable")
               {
                 cv++;
                 if (cv==1) t+='<span>\n';
                 t+=' '+this.children[this.i].attributes[j].nodeName+' ="'+this.children[this.i].attributes[j].nodeValue+'"';
               }
      }
      if (cv>0) t+='</span>><br>\n';
      else t+="><br>\n"
   } else
   t+="><br>\n";
}
NhasC.prototype.parcourir=function () {
 if (this.collec.hasChildNodes) {
   this.children = this.collec.childNodes;
   for(this.i=0; this.i < this.children.length; this.i++) {
      el=this.children[this.i].nodeType;
      switch(el) {
       case 1 :
       case 2 :
        // Section pour ne pas afficher les fonctions javascript du présent document à la strucutre du document analysé
            IndiceReturn=0;
            if(this.children[this.i].attributes.length>0) {
              for (j=0;j<this.children[this.i].attributes.length;j++) {
                if (this.children[this.i].attributes[j].nodeName=="name" && this.children[this.i].attributes[j].nodeValue=="functionsALTI") IndiceReturn=1;
              }
            }            
            if (IndiceReturn==1) continue;
        // fin section     
            if (this.children[this.i].hasChildNodes && this.children[this.i].childNodes.length>0) {
             t+='<img src="Lplus.png" style="margin-left:-20px" id="img'+id+'" border=0 onClick="aff('+id+',this)">\n<'+this.children[this.i].nodeName;
             this.attributs();
             t+='<div id='+id+' style="padding-left:'+b+'px;padding-bottom:5px;padding-top:0px;margin-top:0px;background-image:url(I.png);background-repeat:repeat-y;display:none;width:auto">\n';
             id++;
            } else {
             t+="<img src='T.png'  style='margin-left:-20px' border=0 ><"+this.children[this.i].nodeName+"\n";
             this.attributs();
           }
       break;
       case 3:
       case 8:
           if(this.children[this.i].nodeValue!="\n")
           {
              // enleve les commentaires que j'ai ajouté a la fin
              if (this.children[this.i].nodeValue.indexOf("commentaire alti")>=0) continue; 
              //
              g=this.children[this.i].nodeValue;
              re=/<+/g;
              c=g.replace(re,'<');
              t+="<img src='T.png' style='margin-left:-20px' border=0 >#element text<pre style='padding-left:"+b+"px;margin-top:0px;padding-top:0px;background-color:#E9E9E9;color:#333399'>"+c+"</pre>\n";
            }
       break;
       case 9:
           t+="<span>"+"#document<br>\n";
       break;
       default:
           t+="<span>"+el+"autre<br>\n"
       break;
      }
     if (this.children[this.i].hasChildNodes && this.children[this.i].childNodes.length>0) {
         fh=new NhasC(this.children[this.i]);
         fh.parcourir();
     }

   }
   t+="<img src='end.png' style='margin-left:-20px;margin-bottom:"+dist+"px' border=0 ></div>\n";
 } else
   t+="<br>\n";
}


indice_open=0;
function getContenu() {
k='';
t='';
b=20;
id=2;
if (document.documentElement.hasChildNodes) {
sg=new NhasC(document.documentElement);
sg.parcourir();
}
if (indice_open==1) tutu.close();
tutu=window.open('','DOM','');
tutu.document.open();

k='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title>DOM implementation du document</title><style type="text/css">BODY *,BODY{font-family: Arial;color:#000000;font-size:12px;} LI {list-style-image:url("T.png");margin-left:6px;} .lismoins {list-style-image:url("Lmoins.png");margin-left:6px;} .lisplus {list-style-image:url("Lplus.png");margin-left:6px;}</style></head><body><form>\n';
k+="<script type='text/javascript'><!--\nfunction aff(id,o) {get=document.getElementById(id).style.display;if (get=='block') f='none';else f='block';document.getElementById(id).style.display=f;if (o.src=='http://alti.free.fr/alti/drLplus.png') o.src='Lminus.png';else o.src='Lplus.png';};";
k+='function affi(id,o) {if (o.hasChildNodes) {\n     Ch=o.childNodes;\n alert(Ch.length);for(i=0;i<Ch.length;i++) {  \n if (Ch[i].nodeName=="DIV") { \n    if (Ch[i].style.display=="block") Ch[i].style.display="none";\n     else Ch[i].style.display="block";\n   }\n }\n}\n}\n';
k+="af=0;\n"
k+="function showHideAll(s) {for (j=1;j<"+id+";j++) {document.getElementById(j).style.display=(s==1?'block':'none');if(s==1) document.getElementById('img'+j).src='Lminus.png'; else document.getElementById('img'+j).src='Lplus.png';}}\n";
k+="function invert(ob) {af=(af==1?af=0:af=1);showHideAll(af);ob.value=(af==1?'Tout disparaitre':'Tout Afficher');}\n";
k+="//--></"+"script>\n";
k+='<input type=button value="Tout afficher" onClick="invert(this)"></form>\n';
k+='<div id=0 style="padding-left:20px;padding-bottom:5px;background-image:url(I.png);background-repeat:repeat-y;width:auto"><img src="Lplus.png" style="margin-left:-20px" id="img1" border=0 onClick="aff(1,this)">\n<'+document.documentElement.nodeName+'><br>\n';
k+='<div id=1 style="padding-left:20px;padding-bottom:5px;background-image:url(I.png);background-repeat:repeat-y;display:none;width:auto">\n';
k+=t;
k+="<img src='end.png' style='margin-left:-20px;margin-bottom:"+dist+"px' border=0 ></div></body></html>";
tutu.document.write(k);
tutu.document.close()
indice_open=1;
}
getContenu();
tutu.focus();
this.window.close();
-->
</script>