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

猜你喜欢

转载自www.cnblogs.com/lhyxq/p/10351597.html
今日推荐