PyramiDOM:光谱DOM分析器

Andrea Giammarchi  创造了一个Spectrum（光谱）DOM分析器， PyramiDOM。

 

    生成的光谱 (spectrum) 包含当前文档的每一个 noteType 1 节点，并且会显示节点的提示信息（nodename，id，className）。此外，如果节点临时改变背景颜色会高亮显示（黄色）。最邪恶的效果是在 jQuery 官方网站，因为它的显示很黑暗；最有趣的光谱是Gmail，你可以看到那里嵌套的 divs 形成了一个金字塔，所有nodename都是相同的颜色。但由于特殊的原因，每次的颜色都不相同(随机)。

等页面加载完成后，在url上执行以下代码：

javascript:(function(/*WebReflection*/){PyramiDOM=(function(){function%20a(e,c){for(var%20j,g,h=c.childNodes,d=0,f=h.length;d<f;++d){if((g=h[d]).nodeType===1){e.addChild(a(new%20b(g,e),g))}}return%20e}function%20b(d,c){this.dom=d;this.id=b.register.push(this)-1;this.width=this.height=PyramiDOM.size;this.color=b.getColor(d.nodeName);this.level=(this.parent=c)?c.level+1:0;this.left=this.level*this.width;this.children=[];if(this.level){if(c.children.length){var%20e=c.children[c.children.length-1];this.top=e.top+e.height+1}else{this.top=c.top+(this.width/2)<<0}}else{this.top=0}}b.prototype.addChild=function(c){this.children.push(c);this.height+=c.height+1};b.register=[];b.getColor=(function(){function%20g(h){return%20new%20Array(7-h.length).join("0")+h}function%20d(i){do{var%20h=(Math.random()*16777216)<<0}while(c[h]);c[h]=true;return%20f[i]="#"+g(h.toString(16))}var%20c={},f={};return%20function%20e(h){return%20f[h]||d(h)}})();return{create:function(c,d,e){e(a(new%20b(c),c),d);return%20this},clean:function(){b.register=[];return%20this},getBrick:function(c){return%20b.register[c]},size:4}})();function%20$onmouseover(){var%20a=PyramiDOM.getBrick(this.id.split("-")[1]);a.style=a.dom.style.background;a.dom.style.background="yellow"}function%20$onmouseout(){var%20a=PyramiDOM.getBrick(this.id.split("-")[1]);a.dom.style.background=a.style}function%20showPyramiDOM(f,j){var%20b=document.createElement("a"),e=b.style,h=f.dom.nodeName;if(f.dom.id){h+="%20#"+f.dom.id}if(f.dom.className){h+="%20"+f.dom.className}b.id="pyramidom-"+f.id;b.title=b.alt=h;b.onmouseover=$onmouseover;b.onmouseout=$onmouseout;e.position="absolute";e.margin=e.padding=0;e.top=f.top+"px";e.left=f.left+"px";e.height=f.height+"px";e.width=f.width+"px";e.background=f.color;j.appendChild(b);for(var%20d=f.children,c=0,g=d.length;c<g;++c){showPyramiDOM(d[c],j)}}var%20div=document.createElement("div");div.style.position="absolute";div.style.zIndex=999999;div.style.top=0;div.style.left=0;PyramiDOM.create(document,document.body.appendChild(div),showPyramiDOM);})();