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