Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历
遍历
“DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型
NodeIterator 和 TreeWalk
上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作
对于检测浏览器对于该功能的实现可以使用以下代码
var supportTraversals = document.implementation.hasFeature("Traversal","2.0"); var supportsNodeIterator = (typeof document.createNodeIterator === "function"); var supportsTreeWalker = (typeof document.createTreeWalker === "function");
所谓深度优先,也就是对于树的深度优先遍历,即先一层一层往子节点深入,深入到最深层次的子节点后才返回上一层进行相同的遍历操作
其遍历顺序如上所示
NodeIterator
NodeIterator类型是两者中较为简单的那个
该类型可以使用 document.createNodeIterator() 方法创建
该方法接收以下四个参数
- root:作为搜索起点的节点
- whatToShow:要访问节点的数字代码
- 这些值以常量的形式定义在 NodeFilter 类型
- NodeFilter.SHOW_ALL:显示所有类型的节点
- NodeFilter.SHOW_ELEMENT:显示元素节点
- NodeFilter.SHOW_ATTRIBUTE:显示特性节点(由于DOM结构的原因在实际使用时并不能使用该值)
- NodeFilter.SHOW_TEXT:显示文本节点
- NodeFilter.SHOW_CDATA_SETCTION:显示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_DOCUMENT_FRAGMENT:显示文档片段节点,对HTML页面无效
- NodeFilter.SHOW_NOTATION:显示符号节点
- 以上常量可以使用位操作符来组合(除SHOW_ALL外),如 NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT
- filter:一个Node Filter对象,或一个表示接受或拒绝节点的函数
- NodeFilter对象:
var filter = {
acceptNode:function(node){
return node.tagName.toLowerCase() === "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
} 函数:
var filter = function(node){
return node.tagName.toLowerCase() === "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
- NodeFilter对象:
- entityReferenceExpansion:布尔值,是否拓展实体引用,HTML中不起作用,因为其中的实体不能拓展
·
若希望使用该类型遍历文档中的元素最主要的两个方法就是 nextNode() 和 previousNode() 用于实现遍历的上一步和下一步,返回一个指向当前遍历节点的指针,若已经遍历完成回到起始节点则返回null
var div = document.getElementById("div1");
var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
var node = iterator.nextNode();
while(node !=== null){
alert(node.tagName);
node = iterator.nextNode();
}
可使用上方代码遍历下方的文档
<div id ="div1">
<p><b>hello</b>World!</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<ul>
</div>
TreeWalker
TreeWalker是NodeIterator 的高级版本
其创建方式和 NodeIterator 一致
除了 NodeIterator 所拥有的 nextNode、previousNode之外
TreeWalker还拥有以下方法
- parent Node():得到当前节点的父节点
- first Child():得到当前节点的第一个子节点
- last Child():当前节点的最后一个子节点
- nextSibling():当前节点的下一个同辈节点
- previousSibling():当前节点的上一个同辈节点
其构建方法为: document.createTreeWalker()
还有一点不同在于 TreeWaler 可以使用 NodeFilter.FILTER_REJECT
其与 Node FIlter.FILTER_SKIP 的区别在于 SKIP 只会跳过当前节点,而REJECT会跳过当前节点及其子树
除此而外 TreeWalk 还有一个 currentNode 属性可以修改起始节点
关于遍历部分需要注意的是IE似乎并没有类似的遍历节点的解决方案,所以跨浏览器的遍历方法十分少见
Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历的更多相关文章
- Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化
DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...
- Javascript高级编程学习笔记(1)—— JS简介
此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...
- Javascript高级编程学习笔记(54)—— DOM2和DOM3(6)范围选择
范围 为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口 通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限 在常规操作不能有效地修改文档时,使用范围往往可以 ...
- Javascript高级编程学习笔记(52)—— DOM2和DOM3(4)元素大小
在日常实践中,我们在使用JS的时候难免会需要获取元素的大小及位置 首先要声明的是,这一部分的内容并不属于DOM2样式规范,因为DOM中并没有对我们如何获取元素大小的相关信息做出规范 偏移量 偏移量及元 ...
- Javascript高级编程学习笔记(50)—— DOM2和DOM3(2)样式
样式 在HTML中定义元素的方式有以下三种: 1.link标签引入外部样式表 2.style标签定义嵌入样式 3.通过JS中对style特性定义元素样式(行内样式) “DOM2级样式”围绕上述样式机制 ...
- Javascript高级编程学习笔记(56)—— DOM2和DOM3(8)低版本IE范围
虽然IE9支持了DOM范围,但是IE8及更早版本并不支持DOM范围 所以IE8以下的更早版本的IE提出了与之类似的概念以供大家使用 也就是 文本范围 var range = document.body ...
- Javascript高级编程学习笔记(55)—— DOM2和DOM3(7)操作范围
操作范围中的内容 在创建范围时,内部会为这个范围创建一个文档片段 范围所属的全部节点都会被添加到这个片段中 虽然选取范围可以不是完整的.良好的DOM结构 但是在这个为范围创建的文档片段中,会自己完缺少 ...
- Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表
操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...
- Javascript高级编程学习笔记(57)—— 事件(1)事件流
事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...
随机推荐
- Struts2源码解析-----转载
前面一节描述的Struts2很多东西,这节是对源码进行分析描述,通过这一节应该对struts2有了清楚认识! 还是把Struts2这个框图贴出来: 第一步:HttpServletRequest进入到S ...
- C# 线程获取/设置控件(TextBox)值
线程读写控件需要用委托(delegate)与Invoke/BeginInvoke来进行 参考内容:http://www.cnblogs.com/runner/archive/2011/12/30/23 ...
- java搭建SSM的Web开发框架-整合这3者用到的配置文件
1./WEB-INF/web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmln ...
- PHP整理--PHP语句流程
PHP跟JS一样是从上往下的执行语句:同样的PHP也有if语句.循环.数组和函数. 一.条件语句 if..else... swich (1)多条if语句 $name=30; if($nam ...
- c# maiform父窗体改变动态的gridew 奇偶行变色的快捷方法
无需在每个usercontrol里边单个指定控件内gridview 隔行换色.只需要在主窗体内改成统一就好了 做到这点要明白.gridcontrol 是usercontrol 的子控件 , grid ...
- c++常用小算法
这篇文章列出了一些简单常用的C++容器算法,C++标准库中事实上提供了很多的算法并且有详细的介绍.如果需要详细的了解这些算法可以 参考C++在线参考手册 algrithm . 1 排序 在 #incl ...
- 设计模式学习心得<组合模式 Composite>
组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结构型模式, ...
- try_files
try_files $uri $uri/ /index.php$is_args$args 假设你防问 https://demo.com/demo 1.$uri:查找/demo文件 2.$ui/:查找/ ...
- Java 调用执行其他语言的程序
以 Java 调用 Python 为例 1. 使用 Runtime 类 该方式简单,但是增加了 Java 对python 的依赖,需要事先安装python,及python程序依赖的第三方库 Runti ...
- vue中v-for的使用
本人正在开始学习Vue,每天写写基础的记录,希望对大家有帮助,如有错误还望指出,我也是一个小白,也希望大家能一起进步 v-for指令的使用: 1.循环普通数组 item in list 中的item是 ...