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

该方法接收以下四个参数

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似乎并没有类似的遍历节点的解决方案，所以跨浏览器的遍历方法十分少见