资讯频道 → Web前端
阅读更多

4顶
0踩

Web前端

翻译新闻 PyramiDOM:光谱DOM分析器

2009-08-03 12:39 by 副主编 zly06 评论(0) 有4270人浏览
F# C++ C C#

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);})();
 
  • 大小: 66.9 KB
来自: ajaxian
4
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 免费下载:C语言难点分析整理.doc

    2. C语言难点分析整理 10 3. C语言难点 18 4. C/C++实现冒泡排序算法 32 5. C++中指针和引用的区别 35 6. const char*, char const*, char*const的区别 36 7. C中可变参数函数实现 38 8. C程序内存中组成部分 41 9. ...

  • Initialize failed: invalid dom.——带你深入因操作dom不当带来的错误

    浏览器控制台报错，初始化失败，不合法的dom(Initialize failed: invalid dom.) 此类错误的原因通常是因为试图操作一个未就绪的dom(或未被创建，或未完全加载等等)。

  • Error in created hook: “Error: Initialize failed: invalid dom.“

    原因分析:我这边在 created l里做了一个refresh的一个定时刷新方法,但因为我将 refresh 方法放到后面就导致先是加载了 '生产统计','能源监控',,'质量墙','生产进度监控'等这几个方法,最后载 refresh方法,这才导致...

  • 高光谱图像分析：分类 I

    这篇文章旨在帮助初学者使用Python从以下部分进行HSI分析：（1）数据收集；（2）数据预处理；（3）数据可视化以及探索性数据分析。 Introduction 在遥感（Remote Sensing）中，高光谱遥感器广泛用于以高光谱分辨率...

  • 了解Angular Ivy: Incremental DOM 和 Virtual DOM

    Angular Ivy 作为Angular 的最新渲染引擎，与我们看到的当今所有主流框架的引擎有根本不同，因为Angular Ivy使用了Incremental DOM(增量DOM). 什么是 incremental DOM?它与virtual DOM有何不同？ 让我们对他们做下...

  • Web渗透测试之XSS攻击：基于DOM的XSS

    文章目录前言基于DOM的XSS总结 前言 基于DOM的XSS 总结

  • 高光谱图像分析：分类 II

    上一篇文章中使用 Pavia 大学的数据进行了数据探索性分析和可视化。可视化的代码，在上一篇文章中已经给出，只需要修改数据即可实现相应的可视化。本文重点介绍数据的降维和特征选择。 文章目录 Github 源码获取 ...

  • 光谱分析

    光谱分析 根据物质的光谱来鉴别物质及确定它的化学组成和相对含量的方法叫光谱分析．（由于每种原子都有自己的特征谱线，因此可以根据光谱来鉴别物质和确定它的化学组成．这种方法叫做光谱分析） 其优点是灵敏，迅速...

  • 第一章---近红外光谱分析概述1

    按照分析介质或手段的不同，光谱分析属于分析科学中的物理及物理化学分析，按照其采用分析光谱的谱区差异，可分为近红外、中红外和远红外等，其共性特征是：光谱分析的基础信息都是根据分子等微观粒子运动的特点，...

  • 引用echarts入坑之旅——Uncaught Error: Initialize failed: invalid dom.

    错误分析我的js代码段写在body标签之前，浏览器加载时会先去解析js代码，当浏览器执行document.getElementById('main')时，由于id为main的dom对象还未被创建，报错Initialize failed: invalid dom. Jquery教程中...

  • 编译原理实验五：用Yacc设计语法分析器1

    其中，词法分析使用实验3中已完成的词法分析器（即，你需要将本实验的语法分析器和实验3的词法分析器链接起来）。 实验要求： 输入为实验2所给语言写的源程序文件；输出为屏幕显示语法分析是否成功。 在语法分析中不...

  • 【编译原理】flex实现词法分析器

    flex自动实现词法分析器

  • 编译原理：词法分析实验报告

    词法分析实验报告 文章目录词法分析实验报告一、实验目的二、实验原理三、实验要求四、实验步骤（利用Java语言来进行词法分析）①　待分析的语言词法②　单词符号对应的种别码③　词法分析程序流程图④　编写程序...

  • 编译原理实验六：语义分析器

    （一）学习经典的语义分析器（2小时） 实验目的 学习已有编译器的经典语义分析源程序。 实验任务 阅读已有编译器的经典语义分析源程序，并测试语义分析器的输出。 实验内容 （1）选择一个编译器，如：TINY或...

  • 用maven驱动搜索dom4j异常,原因分析

    在用dmo4j解析web.xml文件时候,在maven驱动管理网站搜索"dom4j",弹出的 标签为: &lt;dependency&gt; &lt;groupId&gt;dom4j&lt;/groupId&gt; &lt;artifactId&gt;dom4j&lt;/artifactId&gt; &lt;version&gt;...

  • 用java实现的语法分析器

    语法分析器调用的是词法分析器的类。。。 自己写的。。LL（1）。。。 预测分析。。。

  • 编译原理LL(1)语法分析器实现

    LL(1)语法分析气的实现 要实现LL1文法，根据个人经验总结，需要以下步骤： 我没有实现间接左递归的消除，所以处理不了间接左递归文法。 下面我们来说一下实现过程。 输入相关文法，使用正则表达式将文法中的...

  • 浏览器内核分析4 -- HTML解释器和DOM模型

    下面这张图描述了整个渲染流程。...读取CSS文件，解析生成样式规则表，并根据选择器找到元素的匹配规则 由DOM树和匹配规则生成RenderObject树，并进行布局和绘制 执行JavaScript时，可能会改变DOM结构和CSS样式，此

  • 编译原理：词法分析器设计与实现(C语言)

    词法分析器设计与实现 待分析的简单的词法 （1）关键字： begin if then while do end 所有的关键字都是小写。 （2）运算符和界符 ： = + - * / &lt; &lt;= &lt;&gt; &gt; &gt;= = ; ( ) # （3）其他单词是...

Global site tag (gtag.js) - Google Analytics