Your Ad Here

advanced code snippet search

Posted By

eltweet on 06/02/11


Tagged

domtree


Versions (?)

View DOM Tree Fragment by id/name.

 / Published in: JavaScript
 
Expand | Embed | Plain Text 
  1. javascript:
  2.  
  3.              /******** 
  4.  
  5.             View DOM Tree Fragment by id/name.
  6.  
  7.              Browser specific: Opera Mobile 8.65 (Symbian). 
  8.  
  9.             Because of the 240x320 screen this is more of a novelty than a practical tool unless maybe the mobile css and key commands are adapted to suit a desktop. 
  10.  
  11.              Needs compressing (browser can bookmark up to 4096 chars maximum). 
  12.  
  13.             *******/
  14.  
  15.              function cleanWhitespace(node){for(var i=0;i<node.childNodes.length;i++){var child=node.childNodes[i];if(child.nodeType==3 && !/\S/.test(child.nodeValue)){node.removeChild(child);i--}if(child.nodeType==1) cleanWhitespace(child)}/*return node*/};cleanWhitespace(document.body);
  16.  
  17.              el_DOM={A: [], B: [], C: [], D: [], w: 0, x: 0, y: 0, z: 0};
  18.  
  19.              function traverseDOMTree(targetDoc, el, depth, seq){seq=!seq? 0 : seq;var tags1='<DIV><P>', tags2="</P></DIV>", str='', span=0;
  20.  
  21.              if(el){var tagName=el.nodeName;if(tagName){
  22.  
  23.              if(el.parentNode.tagName=='BODY'){el_DOM.D[el_DOM.z+1]=el.nodeName=='#comment'? el.data.replace(/</g, '&lt;') : el.innerHTML;targetDoc.write(tags1+"<SPAN style=\"background:Azure3\" onclick=\"open().document.write('<html><body>'+opener.el_DOM.D["+(el_DOM.z+1)+"]+'<scr'+'ipt>document.onkeydown=function(e){if(e.which==196/* Green Dial Key */) top.close();return false}</scr'+'ipt></body></html>')\">"+(seq+1)+".</SPAN>  &lt;"+tagName);el_DOM.z++}
  24.  
  25.              else targetDoc.write(tags1+(seq+1)+".  &lt;"+tagName)}
  26.  
  27.              if(el.data){el_DOM.A[el_DOM.w]=el.data;targetDoc.write(" <SPAN style=\"background:Azure3\" onclick=\"alert(opener.el_DOM.A["+el_DOM.w+"])\">Text</SPAN>");el_DOM.w++}
  28.  
  29.              if(el.href){el_DOM.B[el_DOM.x]=el.href;targetDoc.write(" <SPAN style=\"background:Azure3\" onclick=\"alert(opener.el_DOM.B["+el_DOM.x+"])\">HREF</SPAN>");el_DOM.x++}
  30.  
  31.              if(el.src){el_DOM.C[el_DOM.y]=el.src;targetDoc.write(" <SPAN style=\"background:Azure3\" onclick=\"alert(opener.el_DOM.C["+el_DOM.y+"])\">SRC</SPAN>");el_DOM.y++}
  32.  
  33.              if(el.id){str+=" id:"+el.id;span=1}
  34.  
  35.              if(el.name){str+=" name:"+el.name;span=1}
  36.  
  37.              if(el.className) str+=" ."+el.className;
  38.  
  39.              if(el.type) str+=" type:"+el.type;
  40.  
  41.              if(el.alt) str+=" alt:"+el.alt;
  42.  
  43.              if(el.content) str+=" content:"+el.content;
  44.  
  45.              if(el.media) str+=" media:"+el.media;
  46.  
  47.              if(el.rel) str+=" rel:"+el.rel;
  48.  
  49.              str=span==1? "<SPAN style=\"background: yellow\">"+str+"</SPAN>" : str;
  50.  
  51.              str+=el.childNodes.length>0? "&gt; ChildNodes: "+el.childNodes.length : "&gt;";
  52.  
  53.              str+=tags2;
  54.  
  55.              targetDoc.write(str);
  56.  
  57.              var i=0, elementChild=el.childNodes[i];while(elementChild){
  58.  
  59.              targetDoc.write("<DIV>");
  60.  
  61.              traverseDOMTree(targetDoc, elementChild, depth+1, i);
  62.  
  63.              i++;elementChild=el.childNodes[i];targetDoc.write("</DIV>")}}}
  64.  
  65.              function printDOMTree(domElement, destinationWindow){var W=destinationWindow;if(!W) W=open('', '_blank');W.document.open("text/html", "replace");W.document.write("<HTML><HEAD><TITLE>MY NODE TREE</TITLE>"
  66.  
  67.             +"<STYLE type=\"text/css\">"
  68.  
  69.             +"@media handheld{ "
  70.  
  71.             +"* {font-size:8pt} "
  72.  
  73.             +"body {margin-left:-16px;} "
  74.  
  75.             +"#DOMList p {/* width:auto; */margin:0;padding:0;border:1px 0 1px 0;} "
  76.  
  77.             +"#DOMList div {width:320px;margin:0 0 0 2px;padding:0 0 0 10px;border-left:1px solid #999;}"
  78.  
  79.             +"}</STYLE>"
  80.  
  81.             +"</HEAD><BODY>"
  82.  
  83.             +"<DIV id='DOMList'>");traverseDOMTree(W.document, domElement, 1);W.document.write("</DIV>"
  84.  
  85.             +"<SCR"+"IPT>"
  86.  
  87.             +"alert('**** Green Dial Key closes this window\\n*** SCROLL:\\nUP - Pencil Key or Star\\nDOWN - C or Hash\\nLEFT - 4\\nRIGHT - 6');"
  88.  
  89.             +"var d=document, D=d.documentElement, st='scrollTop', sl='scrollLeft', scrollingNow=0, Idwn=0, Iup=0, Ydwn, Yup, f=false;function clrInterval(){scrollingNow=0;if(Idwn!=0){clearInterval(Idwn), Idwn=0}else{clearInterval(Iup), Iup=0}}function dwn(){scrollingNow=1;Idwn=setInterval(function(){Ydwn=D[st];scroll(D[sl], Ydwn+13);Ydwn==D[st]&&clrInterval()}, 0)}function up(){scrollingNow=1;Iup=setInterval(function(){Yup=D[st]-13;scroll(D[sl], Yup);Yup<=0&&clrInterval()}, 0)};d.onkeypress=function(e){e=e.which;if(e==35/* # Key*/){scrollingNow==0? dwn() : clrInterval();return f}if(e==42/* Key '*' */){scrollingNow==0? up() : clrInterval();return f}if(e==8/* C Key*/){Ydwn=D[st];if(scrollingNow==1) clrInterval();else{scroll(D[sl], Ydwn+307);if(Ydwn==D[st]) scroll(0, 0)}}if(e==48/* Key 0*/ || e==57/* Key 9*/ || e==55/* Key 7*/ || e==53/* Key 5*/ || e==51/* Key 3*/ || e==49/* Key 1*/){scrollingNow==1&&clrInterval();return f}if(e==52/* Key 4*/){scrollingNow==1? clrInterval() : scroll(D[sl]-20, 0);return f}if(e==54/* Key 6*/){scrollingNow==1? clrInterval() : scrollBy(D[sl]+20, 0);return f}};d.onkeydown=function(e, et){e=e.which;if(e==196/* Green Dial Key */){clrInterval();self.close();return f}if(e==18/* Pencil Key*/){et=event.target.type;if(et=='textarea' || et=='text') return clrInterval();scrollingNow==1? clrInterval() : D[st]==0? scroll(0, D.scrollHeight): scrollBy(D[sl], -307);return f}}"
  90.  
  91.             +"</SCR"+"IPT></BODY></HTML>");W.document.close();};
  92.  
  93.              (function(d, W1){W1=open('', '_blank');with(W1.document){open('text/html');write("<HTML>"+d.all.tags('HEAD')[0].outerHTML+"<BODY>"+d.body.innerHTML+"<SCR"+"IPT type=\"text/javascript\">addEventListener(\"DOMContentLoaded\", function(d){var node, ref_Node=[], spanText=[], obj, span;function recursive(node, C, i){if(node.name || node.id){ref_Node[ref_Node.length]=node;spanText[spanText.length]=' <'+node.tagName+(node.name? ' name='+node.name : '')+(node.id? ' id='+node.id : '')+'>'};C=node.childNodes;for(i=0;i<C.length;++i) recursive(C[i])}recursive(d);for(obj in ref_Node){node=ref_Node[obj];span=d.createElement('SPAN');span.style=\"color:red !important;background:#FF9 !important\";span.appendChild(d.createTextNode(' [ '+spanText[obj]+' ]'));span.onclick=function(o){return function(){opener.printDOMTree(o=o.name? opener.document.getElementsByName(o.name)[0] : opener.document.all[o.id])}}(node);node.parentNode.insertBefore(span, node);node.parentNode.insertBefore(d.createTextNode(' '), span)}"
  94.  
  95.             +"alert('*** Click on a yellow <SPAN> to reveal the tree.\\n**** Green Dial Key closes this window');d.onkeydown=function(e){if(e.which==196/* Green Dial Key */) top.close();return false}"
  96.  
  97.             +";}(document), false)</SCR"+"IPT></BODY></HTML>");close()}
  98.  
  99.              ;})(document)

Report this snippet  

You need to login to post a comment.