遍历

“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() 方法创建

该方法接收以下四个参数

  1. root:作为搜索起点的节点
  2. 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
  3. filter:一个Node Filter对象,或一个表示接受或拒绝节点的函数
    1. NodeFilter对象:

      var filter = {
      acceptNode:function(node){
      return node.tagName.toLowerCase() === "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
      }
      }
    2. 函数:

      var filter = function(node){
      return node.tagName.toLowerCase() === "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
      }

        

  4. 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)遍历的更多相关文章

  1. Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  2. Javascript高级编程学习笔记(1)—— JS简介

    此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...

  3. Javascript高级编程学习笔记(54)—— DOM2和DOM3(6)范围选择

    范围 为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口 通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限 在常规操作不能有效地修改文档时,使用范围往往可以 ...

  4. Javascript高级编程学习笔记(52)—— DOM2和DOM3(4)元素大小

    在日常实践中,我们在使用JS的时候难免会需要获取元素的大小及位置 首先要声明的是,这一部分的内容并不属于DOM2样式规范,因为DOM中并没有对我们如何获取元素大小的相关信息做出规范 偏移量 偏移量及元 ...

  5. Javascript高级编程学习笔记(50)—— DOM2和DOM3(2)样式

    样式 在HTML中定义元素的方式有以下三种: 1.link标签引入外部样式表 2.style标签定义嵌入样式 3.通过JS中对style特性定义元素样式(行内样式) “DOM2级样式”围绕上述样式机制 ...

  6. Javascript高级编程学习笔记(56)—— DOM2和DOM3(8)低版本IE范围

    虽然IE9支持了DOM范围,但是IE8及更早版本并不支持DOM范围 所以IE8以下的更早版本的IE提出了与之类似的概念以供大家使用 也就是 文本范围 var range = document.body ...

  7. Javascript高级编程学习笔记(55)—— DOM2和DOM3(7)操作范围

    操作范围中的内容 在创建范围时,内部会为这个范围创建一个文档片段 范围所属的全部节点都会被添加到这个片段中 虽然选取范围可以不是完整的.良好的DOM结构 但是在这个为范围创建的文档片段中,会自己完缺少 ...

  8. Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表

    操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...

  9. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

随机推荐

  1. Struts2源码解析-----转载

    前面一节描述的Struts2很多东西,这节是对源码进行分析描述,通过这一节应该对struts2有了清楚认识! 还是把Struts2这个框图贴出来: 第一步:HttpServletRequest进入到S ...

  2. C# 线程获取/设置控件(TextBox)值

    线程读写控件需要用委托(delegate)与Invoke/BeginInvoke来进行 参考内容:http://www.cnblogs.com/runner/archive/2011/12/30/23 ...

  3. java搭建SSM的Web开发框架-整合这3者用到的配置文件

    1./WEB-INF/web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmln ...

  4. PHP整理--PHP语句流程

    PHP跟JS一样是从上往下的执行语句:同样的PHP也有if语句.循环.数组和函数. 一.条件语句   if..else...    swich  (1)多条if语句 $name=30; if($nam ...

  5. c# maiform父窗体改变动态的gridew 奇偶行变色的快捷方法

    无需在每个usercontrol里边单个指定控件内gridview  隔行换色.只需要在主窗体内改成统一就好了 做到这点要明白.gridcontrol 是usercontrol 的子控件 , grid ...

  6. c++常用小算法

    这篇文章列出了一些简单常用的C++容器算法,C++标准库中事实上提供了很多的算法并且有详细的介绍.如果需要详细的了解这些算法可以 参考C++在线参考手册 algrithm . 1 排序 在 #incl ...

  7. 设计模式学习心得<组合模式 Composite>

    组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结构型模式, ...

  8. try_files

    try_files $uri $uri/ /index.php$is_args$args 假设你防问 https://demo.com/demo 1.$uri:查找/demo文件 2.$ui/:查找/ ...

  9. Java 调用执行其他语言的程序

    以 Java 调用 Python 为例 1. 使用 Runtime 类 该方式简单,但是增加了 Java 对python 的依赖,需要事先安装python,及python程序依赖的第三方库 Runti ...

  10. vue中v-for的使用

    本人正在开始学习Vue,每天写写基础的记录,希望对大家有帮助,如有错误还望指出,我也是一个小白,也希望大家能一起进步 v-for指令的使用: 1.循环普通数组 item in list 中的item是 ...