javascript: var docEles=[]; var tempBank=''; var windowWidth=450; var background='url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGeYUxB9wAAACBjSFJNAAB6JQAAgIMAAPoBAACA5gAAdTEAAOpcAAA6lwAAF25E0P0BAAAAPUlEQVR42mLcdeAKA24AEEBMDHgBQAARkAYIIALSAAFEQBoggAhIAwQQAWmAACIgDRBABKQBAoiANECAAQDTLgJiYYMOJQAAAABJRU5ErkJggg%3D%3D)'; var currentEle=''; var shiftKey=false; var isXHTML=/html\:/.test(document.getElementsByTagName('body')[0].nodeName); function createNewEle(ele){ if(isXHTML) { return document.createElementNS('http://www.w3.org/1999/xhtml', ele); } else { return document.createElement(ele); }; }; function showIt(key){ var ele=document.getElementById(docEles[key]); var x=ele.offsetLeft, y=ele.offsetTop; while(ele.offsetParent){ele=ele.offsetParent;x+=ele.offsetLeft;y+=ele.offsetTop;}; ele=document.getElementById(docEles[key]); tempBank=window.getComputedStyle(ele,null).getPropertyValue('background-color'); ele.style.backgroundColor='#99f'; setTimeout('document.getElementById(docEles['+key+']).style.backgroundColor=\''+tempBank+'\';',600); window.scrollTo(x-150, y-150); } var ns='http://www.w3.org/1999/xhtml'; function charm(){ var ele=createNewEle('div'); ele.id='tree'; var maxDeep=0; var bankCounts=[]; var za=0; function count(eleName) { var isIn=false; for(var c=0;c < bankCounts.length; c++) { if(bankCounts[c][0]==eleName){isIn=true;bankCounts[c][1]++;} } if(!isIn) bankCounts.push([eleName,1]); }; function createDOMTree(node, toEle, colorDeepCurrent){ if( node.nodeType==3) { if(!/^[\u0009\u000A\u00A0\u000D\u000B\u0020]*$/.test(node.data)) { var eleTemp=toEle.appendChild(createNewEle('span')); eleTemp.className='showText'; eleTemp.appendChild(document.createTextNode(node.nodeValue)); } } if( node.nodeType==1){ colorDeepCurrent++; var newEle=toEle.appendChild(createNewEle('div')); var attrs=''; if(node.attributes.length > 0) { for(var z=0; z < node.attributes.length;z++) if(node.attributes[z] ) attrs+=node.attributes[z].name+' : '+node.attributes[z].value+'\u000A'; } var hasChildTyp1=false; for (var k=0; ((child=node.childNodes[k]) && !hasChildTyp1); k++) if(child.nodeType==1) hasChildTyp1=true; count(node.nodeName); if(hasChildTyp1) newEle.className='folderClose'; newEle.id='eleKey'+za; if(node.getAttribute('id')=='' || node.getAttribute('id')==null) node.id='keyXR5T'+za; docEles.push(node.id); za++; if(maxDeep < colorDeepCurrent) maxDeep = colorDeepCurrent; var newEleName=newEle.appendChild(createNewEle('h2')); newEleName.appendChild(document.createTextNode(node.nodeName)); if(hasChildTyp1){ var toggle=newEleName.appendChild(createNewEle('span')); toggle.className='toggle open'; toggle.appendChild(document.createTextNode('\u2192')); toggle=newEleName.appendChild(createNewEle('span')); toggle.className='toggle close'; toggle.appendChild(document.createTextNode('\u2193')); } if(node.attributes.length > 0) newEle.appendChild(createNewEle('pre')).appendChild(document.createTextNode(attrs)); for (var k=0; child=node.childNodes[k]; k++) createDOMTree(child, newEle, colorDeepCurrent); } } createDOMTree(document.documentElement, ele, 0); var win=window.open('','','top='+window.innerHeight*0.05+',height='+window.innerHeight*0.9+',width='+windowWidth+',resizable=yes'); win.document.open(); win.document.write(''+ ''+ ''+ ''+ 'DOM tree for: '+location.href+''+ ''+ ''+ '

DOM tree for: '+document.title+'

address: '+location.href+'

'+ ''); win.document.close(); for(var c=0;c < bankCounts.length; c++) { bankCounts[c][0]=bankCounts[c].join(': '); bankCounts[c].pop(); }; win.document.body.appendChild(win.document.createElement('p')).appendChild(win.document.createTextNode('max deep of a nested Element: '+maxDeep)); win.document.body.appendChild(win.document.createElement('p')).appendChild(win.document.createTextNode(' | '+bankCounts.join(' | ')+' | ')); var divFix=win.document.body.appendChild(win.document.createElement('div')); divFix.id='divFix'; var button=divFix.appendChild(win.document.createElement('input')); button.type='button'; button.value='show whole tree'; button.onclick=function(){win.showWholeTree(this)}; var button2=divFix.appendChild(win.document.createElement('input')); button2.type='button'; button2.value='hide Text Nodes'; button2.onclick=function(){win.showTextNodes(this)}; win.document.body.appendChild(win.document.importNode(ele,true)); win.document.getElementById('tree').onclick=win.tree; button.onclick=function(){win.showWholeTree(this)}; document.onclick=function(e) { if(typeof win.document!='undefined'){; var ele=e.target; var eleId=ele.id; var i=0; while(eleId!=docEles[i] && i