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; //修改起点