`
liuwei_blog
  • 浏览: 94881 次
  • 性别: 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();
//...
}

分享到:
评论

相关推荐

    DOM对象模型

    **DOM对象模型** DOM,全称为“Document Object Model”,即文档对象模型,是W3C组织定义的一个标准,用于表示HTML或XML文档的一种结构化表示方式。它将文档解析为一个由节点组成的树形结构,使得JavaScript或其他...

    遍历DO元素

    遍历DOM元素是JavaScript和jQuery中常见的任务,用于查找、修改或者操作页面内容。本篇将详细探讨如何在jQuery中遍历和筛选DOM元素。 首先,我们来看3.1.1章节关于按索引筛选元素的方法: 1. `.eq(index)`:这个...

    c#操作浏览器dom对象

    本主题聚焦于“C#操作浏览器DOM对象”,这是一个关于如何利用C#与Web浏览器进行交互,尤其是操纵网页的Document Object Model (DOM) 的技术。DOM是HTML和XML文档的结构化表示,允许程序员通过JavaScript或其他语言来...

    jQuery对象与DOM对象之间的转换方法

    DOM对象是由浏览器原生提供的DOM(文档对象模型)API创建的对象,是直接操作页面元素的基础。DOM对象可以使用标准的DOM方法进行操作。比如,要获取一个元素内的HTML内容,我们可能会用到以下DOM方法: ```javascript...

    DOM对象中的节点操作.pdf

    总结来说,DOM对象中的节点操作是Web开发中的基础和核心,它包括了节点的概念理解、节点类型和属性的掌握、以及对节点进行增删改查等实际操作的能力。通过深入学习和实践DOM节点操作,开发者可以有效地控制Web文档,...

    文档对象模型(DOM)

    例如,通过改变DOM,可以实现动态加载内容、响应用户交互、进行页面动态更新等效果。此外,DOM还与CSSOM(CSS对象模型)结合,实现样式操作,以及与MutationObserver接口配合,监控DOM的变化。 总结起来,DOM是Web...

    韩顺平老师笔记JS面向对象和dom编程笔记

    4. **文档遍历**:DOM提供方法遍历整个文档树,查找特定的元素。例如,找到所有class为'myClass'的元素: ```javascript var elements = document.getElementsByClassName('myClass'); for (var i = 0; i ; i++) ...

    JQ 遍历节点树

    例如,我们可以遍历整个页面,找到特定类型的元素进行样式修改,或者获取某个元素的所有祖先元素来实现特定的导航效果。 为了更好地理解和实践这些概念,可以参考提供的"demo"文件。这个示例可能包含一个HTML页面和...

    jQuery常见的遍历DOM操作详解

    在jQuery中,遍历DOM(文档对象模型)是开发者经常使用的功能,用于高效地操作页面上的元素。本文将深入解析jQuery中的几个关键遍历方法,包括`parent()`、`parents()`、`parentsUntil()`、`find()`、`eq()`和`...

    dhtmlxTabbar如何访问每个选项的DOM

    - 这里假设每个选项都嵌套在一个IFRAME元素内,这是因为dhtmlxTabbar默认将每个选项的内容渲染在一个独立的IFRAME中,这样可以提高页面性能并减少DOM树的复杂性。 3. **获取IFRAME的内容窗口与文档对象**: - `$...

    HTML DOM 参考手册

    2. **集合**:DOM中的集合是一组相关对象的集合,如`childNodes`集合包含了某个元素的所有子节点,而`getElementsByTagName`方法返回的是具有特定标签名的所有元素集合。这些集合可以被循环遍历,方便地进行批量操作...

    比较json对象中的两个数组含有的相同元素,点击按钮输出新的数组

    这涉及到JavaScript的数据操作、数组遍历以及DOM交互。 首先,我们需要获取到JSON对象中的两个数组。假设我们有两个JSON对象,`obj1`和`obj2`,它们各自包含一个数组属性,如`arr1`和`arr2`: ```json { "obj1": ...

    jQuery中each遍历的三种方法实例分析

    3. 先获取某个集合对象,然后遍历集合对象的每一个元素 ```javascript var d = $("div"); $.each(d, function(index, domEle){ // d 是要遍历的集合对象 // index 是当前元素的索引 // domEle 指向当前遍历到...

    DOM 文档对象模型

    DOM 将文档视为一个由节点组成的层次化结构,每个节点代表文档中的某个元素或属性。这种层次化的结构使得开发者能够方便地在文档中导航和检索信息。例如,在处理 HTML 页面时,可以轻松地定位到特定的标签元素,并对...

    javascript客户端遍历控件与获取父容器对象示例代码

    JavaScript作为一门广泛用于网页开发的...通过遍历控件,开发者能够实现对页面元素的批量处理,而获取父容器对象则为实现复杂的页面布局和交互提供了可能。这些知识点的深入理解和应用将极大提升前端开发的效率与质量。

    dojo1.6关于DOM相关操作的官方介绍

    2. **dojo.NodeList**: dojo.query返回的是一个dojo.NodeList对象,它扩展了Array原型,提供了许多便利的方法,如`forEach`、`filter`、`map`等,使得遍历和操作DOM节点变得更加简单。此外,NodeList还支持样式操作...

    QTP & DOM.rar

    此外,测试人员还可以利用DOM进行更复杂的操作,比如遍历整个DOM树,找出特定的元素集合,或者根据动态生成的属性来识别和操作对象。 在QTP的脚本中,我们可以使用内置的DOM函数来操作DOM。例如,`Browser("浏览器...

    树型结构(javascript+dom+xml+css)

    2. **创建DOM结构**:遍历解析后的XML DOM,根据父子关系创建对应的HTML元素,并将它们插入到页面的某个容器元素中。每个节点可能是一个`&lt;li&gt;`元素,子节点则作为`&lt;ul&gt;`内的`&lt;li&gt;`。 3. **应用CSS样式**:编写CSS...

    基于PHP的simplehtmldom一个PHP处理HTML的利器(方便采集)源码.zip

    在这段代码中,`file_get_html()`函数加载了指定URL的HTML内容,并返回一个HTMLDOM对象,通过这个对象我们可以访问和修改页面上的任何元素。 HTMLDOM对象提供了丰富的方法,如`find()`、`getElementById()`、`...

    jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    例如,在处理动态内容或复杂结构时,正确选择遍历方法可以帮助我们减少不必要的DOM查询和遍历,从而优化页面性能。 在编写代码时,重要的是理解不同方法的行为,以便选择最符合特定需求的方法。在使用`parent()`、`...

Global site tag (gtag.js) - Google Analytics