`
liuwei_blog
  • 浏览: 91228 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

遍历某个页面的Dom对象

IE 
阅读更多

遍历某个页面的Dom对象。例如想知道某个DOM对象是否在获得焦点状态。遍历各个DOM节点判断document.activeElement.id == node.id。来确定对象是否获得焦点。
一般会使用各个node访问。类似下面的写法。并且这种写法IE FF都支持。
可是当Dom元素很多的情况下这种方法会很慢。
function IterateNode(node){
//do some thing here.
var childrens = node.childNodes;
if(childrens == null ||
typeof(childrens) == "undefined" ||
childrens.length == 0) return;
for(var i=0;i<childrens.length;i++){
IterateNode(childrens[i]);
}
}


在DOM Level 2标准中提供了两个比较好的方法:
document.createNodeIterator
document.createTreeWalker
createTreeWalker 的功能比 createNodeIterator 强大。支持在兄弟节点上交互(nextSibling previousSibling parentNode)。支持取得首个和最后一个Dom对象(firstChild lastChild)。但是只有FF支持了。用这种方法遍历Dom对象比较快。
function ShowAllDomsByTreeWalker(){
var result;
var walker = document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,false);
var node = walker.nextNode();
while(node){
result += node.tagName + "\t" + node.value + "\t" + node.href + "\n";
node = walker.nextNode();
}
//OutputAllDoms(result);
//walker.nextSibling();
//...
}

分享到:
评论

相关推荐

    vue面试资料,有一些基础的vue知识

    1.需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化 2.compile解析模板指令,将模板中的变量替换成...

    jquery-migrate-1.4.1.min.js

    如果不使用JavaScript 库,遍历DOM (Document Object Model ,文档对象模型)树,以及查找HTML 文档结构中某个特殊的部分,必须编写很多行代码。jQuery 为准确地获取需要检查或操纵的文档元素,提供了可靠而富有...

    超实用的jQuery代码段

    1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 ...

    超级有影响力霸气的Java面试题大全文档

    通常性能上较ArrayList差,而LinkedList使用双向链表实现存储,按序号索引数据需要进行前向或后向遍历,但是插入数据时只需要记录本项的前后项即可,所以插入速度较快。 11、EJB是基于哪些技术实现的?并说出...

    JavaScript笔记

    精确查找某个ID的元素:document.getElementById(id名); 9.null和undefined: |--null:一个特殊的值,表示“无值”--空对象。数据类型为Object |--undefined:表示声明了变量但从未赋值或者对象属性不存在 10...

    jquery插件使用方法大全

    使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分): 代码 var a = $("#cid"); var b = $("&lt;p&gt;hello&lt;/p&gt;"); var c = document.createElement("table"); var tb = $(c); 编辑本段代替body...

    《JavaScript实例精通》[源代码]

    示例描述:JavaScript操作表格和DOM。 15_1.htm 动态添加表格。 15_2.htm 获取表格的某行。 15_3.htm 获取某个表格的单元格。 15_4.htm 锁定表格的表头。 15_5.htm 简单的表格排序。 15_6.htm 表格翻页...

    JavaScript实例精通

    示例描述:JavaScript操作表格和DOM。 15_1.htm 动态添加表格。 15_2.htm 获取表格的某行。 15_3.htm 获取某个表格的单元格。 15_4.htm 锁定表格的表头。 15_5.htm 简单的表格排序。 15_6.htm 表格翻页...

    java 面试题 总结

    通常性能上较ArrayList差,而LinkedList使用双向链表实现存储,按序号索引数据需要进行前向或后向遍历,但是插入数据时只需要记录本项的前后项即可,所以插入速度较快。 8、EJB是基于哪些技术实现的?并说出Session...

    jQuery详细教程

    如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。 当我们在教程中演示 jQuery 时,会将函数直接添加到 &lt;head&gt; 部分中。不过,把它们放到一个单独的...

    Python Cookbook

    12.6 从XML DOM节点的子树中删除仅有空白符的文本节点 451 12.7 解析Microsoft Excel的XML 452 12.8 验证XML文档 454 12.9 过滤属于指定命名空间的元素和属性 455 12.10 用SAX合并连续的文本事件 458 12.11 ...

    Tinyxml 源代码(VC6 & VS2005)

    它还尝试用不同的方法遍历DOM并打印出结点数。 那个Linux makefile很通用,可以运行在很多系统上——它目前已经在mingw和MacOSX上测试过。你不需要运行 ‘make depend’,因为那些依赖关系已经硬编码在文件里了。 ...

    javascript入门笔记

    2、文档对象模型(Document Object Model) - DOM 允许让 JS 与 HTML 文档打交道 3、浏览器对象模型(Browser Object Model) - BOM 允许让 JS 与 浏览器进行交互 JS是一款基于对象的编程语言 2、JS的基础语法 1...

Global site tag (gtag.js) - Google Analytics