"DOM2级遍历和范围"模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator 和 TreeWalker 。这两个类型能够根据给定的节点对DOM结构进行深度优先(depth-first)遍历操作。

浏览器支持:Firefox、Safari、Opera、Chrome、IE9+。

1、NodeIterator

使用 document.createNodeIterator(root, whatToShow, filter, entityReferenceExpansion),创建 NodeIterator 实例。

1)root:搜索起始节点

2)whatToshow:表示要访问那些节点,有下列值,

NodeFilter.SHOW_ALL:所有节点

NodeFilter.SHOW_ELEMENT:元素节点

NodeFilter.SHOW_ATTRIBUTE:特性节点,实际不能使用改值

NodeFilter.SHOW_TEXT:文本节点

NodeFilter.SHOW_CDATA_SECTION:CDATA 节点,对HTML页面没有用

NodeFilter.SHOW_ENTITY_REFERENCE:实体应用节点,对HTML页面没有用

NodeFilter.SHOW_ENTITY:实体节点,对HTML页面没有用

NodeFilter.SHOW_PROCESSING_INSTRUCTION:处理指令节点,对HTML页面没有用

NodeFilter.SHOW_COMMENT:注释节点

NodeFilter.SHOW_DOCUMENT:文档节点

NodeFilter.SHOW_DOCUMENT_TYPE:文档类型节点

NodeFilter.SHOW_FRAGMENT:文档片段节点,对HTML页面没有用

NodeFilter.SHOW_NOTATION:符号节点,对HTML页面没有用

除了 NodeFilter.SHOW_ALL外,可以使用按位或操作来组合多个选项,如 var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT.

3)filter:一个NodeFilter对象,或者是一个表示接受或拒绝的函数。NodeFilter 对象只有一个方法,acceptNode(),定义可访问的情况,返回 NodeFilter.FILTER_ACCEPT 或 NodeFilter.FILTER_SKIP(跳过当前节点)。并且 NodeFilter 是一个抽象类型,不能直接创建它的实例,可以创建一个包含acceptNode()

方法,直接传入 document.createNodeIterator() 中。如果不指定过滤器,传入 null 即可。

 var filter = {
acceptNode:function (node) {
return node.tagName.toLowerCase() == "p"? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
} var filter1 = function(node){
return node.tagName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
} var iterator = document.createNodeIterator(table,NodeFilter.SHOW_ELEMENT,filter,false);

以上 filter 和 filter1 都表示只访问 <p>元素。

4)entityReferenceExpansion

布尔值,表示是否要扩展实体应用,在HTML页面中没有用

NodeIterator 主要有两个方法:

1)nextNode(),迭代器内部指针往下移动一位,并返回下一个遍历的节点。一开始迭代器内部指针指向根节点,所以第一次遍历调用返回根节点,当遍历到最后一个节点时返回 null

2)previousNode(),迭代器内部指针往上移动一位,并返回上一个遍历的节点,第一次遍历调用返回根节点

2、TreeWalker

使用document.createTreeWalker()创建实例,接受四个参数,与document.createNodeIterator()相同。

1)TreeWalker 包含了 NodeIterator 所有功能,还提供了几个新方法,用于移动遍历位置:

patentNode():跳转到当前节点的父节点

firstChild():跳转到当前节点的第一个字节点

lastChild():跳转到当前节点的最后一个节点

nextSibling():跳转到当前节点的后一个同胞节点

previousSibling():跳转到当前节点的前后一个同胞节点

currentNode():当前迭代器内部指针所指向的节点,可以设置,改变继续遍历迭代的起点

2)filter 返回值除了 NodeFilter.FILTER_ACCEPT 或 NodeFilter.FILTER_SKIP,还可以是 NodeFilter.FILTER_REJECT(跳过当前节点及该节点的整个子树)。

3、示例

<table id="filesTable">
<colgroup>
<col style="width: 25%" />
<col style="width: 35%" />
<col style="width: 15%" />
<col style="width: 25%" />
</colgroup>
<thead>
<tr>
<th>Date</th>
<th>File name</th>
<th>File size</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Date</td>
<td>File name</td>
<td>File size</td>
<td><button class="button-list downloadBtn" data="">Download</button></td>
</tr>
<tr>
<td colspan="4">No data</td>
</tr>
</tbody>
</table> var table = document.getElementById("filesTable");
var iterator = document.createNodeIterator(table,NodeFilter.SHOW_ELEMENT,null,false);
var node = iterator.nextNode(); // 返回table,迭代器内部指针往下移
var node1 = iterator.previousNode(); // table,造成迭代器中table迭代两次
while(node != null){
console.log(node.tagName); // (2)TABLE、COLGROUP、(4)COL、THEAD、TR、(4)TH、TBODY、TR、(4)TD、BUTTON、TR、TD
node = iterator.nextNode();
} var walker = document.createTreeWalker(table,NodeFilter.SHOW_ELEMENT,null,false);
walker.firstChild(); // 转到<colgroup>
walker.nextSibling(); // 转到 <thead>
node = walker.firstChild(); // 转到 <thead>中的<tr>
while(node != null){
console.log(node.tagName); // TR、(4)TH、TBODY、TR、(4)TD、BUTTON、TR、TD
node = walker.nextNode();
}

DOM节点遍历的更多相关文章

  1. childNodes遍历DOM节点树

    childNodes遍历DOM节点树 var s = ""; function travel(space,node) { if(node.tagName){ s += space ...

  2. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  3. jquery 源码解析 节点遍历

    jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> ...

  4. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  5. jQuery删除DOM节点

    jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  6. 获取DOM节点的几种方式

    DOM 是一个树形结构,操作一个DOM节点,实际上就是这几个操作:更新.删除.添加.遍历 在操作DOM节点之前,需要通过各种方式先拿到这个DOM节点,常用的方法有: 一.通过元素类型的方法来操作: d ...

  7. jacascript DOM节点——元素节点、属性节点、文本节点

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM节点的三个种类:元素节点.文本节点.属性节点: 元素节点 元素节点就是 HTML 标签元素,元素节点 ...

  8. js学习总结:DOM节点二(dom基本操作)

    一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...

  9. DOM 节点node

    DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构,即在HTML中所有内容都是节点.文档节点是每个文档的根节点,文档节点有一个子节点,称为文档元素.每个文档只能有一个文档元素.在HTM ...

随机推荐

  1. webRTC中音频相关的netEQ(二):数据结构

    上篇(webRTC中音频相关的netEQ(一):概述)是netEQ的概述,知道了它主要是用于解决网络延时抖动丢包等问题提高语音质量的,也知道了它有两大单元MCU和DSP组成.MCU 主要是把从网络收到 ...

  2. Docker端口映射与容器互联

    Docker提供了两个功能来满足访问的基本需求:一是允许映射容器内应用的服务端口到本地宿主主机:另一个是互联机制实现多个容器间通过容器名来快速实现访问. 一.端口映射实现访问容器 当容器中运行一些网络 ...

  3. bzoj5104: Fib数列

    Description Fib数列为1,1,2,3,5,8... 求在Mod10^9+9的意义下,数字N在Fib数列中出现在哪个位置 无解输出-1 Input 一行,一个数字N,N < = 10 ...

  4. [UE4]修改瞬移操作方式,默认正前方

    瞬移的时候,如果箭头指向正前方的角度跟中心线相差不大,则可以强制箭头指向中心线. 因为向量也可以表示方向,因此只要只要判断向量长度就是了,判断VectorLength值即可:

  5. mongo 数据库

    一.管理mongo 配置文件在/etc/mongod.conf 默认端口27017 启动                    sudo service mongod start 停止         ...

  6. Ubuntu离线安装docker

    1.先安装依赖libltdl7_2.4.6-0.1_amd64.deb 下载链接http://archive.ubuntu.com/ubuntu/pool/main/libt/libtool/libl ...

  7. gp工具的许可

    还是要在代码里许可 static class Program { [STAThread] static void Main() { ESRI.ArcGIS.RuntimeManager.Bind(ES ...

  8. python3 十六进制字符串进行分割并累加

    最近忘性大,记录一下 需求: ‘80 11 F1 01 1A’字符串需要把每一个十六进制字符加起来,即80+11+F1+01+1A=? 很简单,不解释,直接上 hex(sum([int(i,16) f ...

  9. (转)Mysql字符串字段判断是否包含某个字符串的3种方法

    方法一: SELECT * FROM users WHERE emails like “%b@email.com%”; 方法二: 利用mysql 字符串函数 find_in_set(); SELECT ...

  10. GDI+ 或 GdiPlus 在VC6下的使用方法

    1.在你的app类头文件中假如以下代码(红字显示) #if !defined(AFX_WALKLTDEMO_H__826A807C_C01D_4FF0_9248_A6BD0369F3A8__INCLU ...