DOM遍历

DOM2级定义了两个辅助完成遍历DOM结构的类型：

NodeIterator和TreeWalker;// FF3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge

1. 创建NodeIterator实例：

  document.createNodelterator();//4个参数

   (1).root :想要作为搜索起点的书中的节点

   (2).whatToShow:表示要访问哪些节点的数字代码

   (3).filter:是一个NodeFilter对象，或者一个表示应该接受还是拒绝的某种特定节点的函数。

   (4).entityReferenceExpansion：一个布尔值，表示是否扩展实体应用，在HTML这个参数无用，设为false.

   注意：filter可以指定自定义的NodeFilter对象，或者一个过滤器函数 。NodeFilter对象的方法acceptNode(),如果访问节点则返回NodeFilter.FILTER_ACCEPT,

否则返回NodeFilter.FILTER_SKIP

例：var filter={

     acceptNode:function(node){

       returnnode.tagName.toLowerCase()==’p’ ?

       NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;

}

};

 

 

NodeIterator的两个方法：nextNode(),previousNode();

    分别用于向前进一步，向后退一步

 

var iterator=document.createNodeIterator(root,NodeFilter.

SHOW_ELEMENT,filter,false);

varnode=iterator.nextNode();

while(node!==null){

  alert(node.tagName);//输出标签名

  node=iterator.nextNode();//每次都向前进一步

}

 

2. 创建一个TreeWalker新实例

 document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,flter,false);

TreeWalker是前者更高级的版本，除了有nextNode(),previousNode()还有以下方法：

 parentNode():遍历到当前元素的父节点

 firstChild(): 遍历到当前节点的第一个子节点

 lastChild():遍历到当前节点的最后一个子节点

 nextSibling(): 遍历到当前节点的下一个同辈节点

 previousSibling():遍历到当前节点的上一个同辈节点

 

属性：currentNode

      表示任何遍历方法在上一次遍历中返回的节点，可以用来修改遍历起点

var node=walker.nextNode();

alert(node==walker.currentNode); //true

walker.currentNode=document.body; //修改起点