DOM LEVEL 2 TRAVERSAL AND RANGE模块定义了两个辅助完成顺序遍历DOM结构(深度优先)的类型:
1. NodeIterator
2. TreeWalker
检测浏览器是否支持DOM2级遍历能力
document.implementation.hasFeature("Travesal","2.0)
typeof document.createNodeIterator == "function"
typeof document.createTreeWalker == "function"
深度优先遍历实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>深度优先遍历实例</title>
</head>
<body>
<p><b>Hello</b> world!</p>
</body>
</html>
1.NodeIterator
【创建】:
document.createNodeIterator(参数1,参数2,参数3,参数4)
参数1:作为搜索起点的节点
参数2:访问哪些节点(可以用位或操作符组合多个选项)
参数3:filter(NodeFilter对象or函数(表示接受或拒绝某种节点))
参数4:是否要扩展实体引用
{其中,参数3filter的返回值:
NodeFilter.FILTER_ACCEPT
NodeFilter.FILTER_SKIP (跳过该节点,继续下个节点)}
【方法】:
nextNode() 下一个节点
previousNode() 上一个节点
/*迭代输出tagname*/
var iterator = document.createNodeIterator(document.body,NodeFilter.SHOE_ELEMENT,null,false );
var node = iterator.nextNode();
while(node != null){
console.log(node.tagName);
node = iterator.nextNode();
}
2.TreeWalker
相比于NodeIterator,可以不定义过滤器(参数3为null),沿任何方向移动
【创建】:
document.createTreeWalker(参数1,参数2,参数3,参数4)
参数1:作为搜索起点的节点
参数2:访问哪些节点(可以用位或操作符组合多个选项)
参数3:filter(NodeFilter对象or函数(表示接受或拒绝某种节点))
参数4:是否要扩展实体引用
{其中,参数3filter的返回值: NodeFilter.FILTER_ACCEPT NodeFilter.FILTER_SKIP (跳过该节点,继续下个节点)
NodeFilter.FILTER_REJECT(跳过该节点的整个子树))
【方法】:
nextNode() 下一个节点
previousNode() 上一个节点
parentNode() 当前节点的父节点
firstChild() 当前节点第一个子节点
lastChild() 当前节点最后一个节点
nextSibling() 当前节点下个同胞节点
previousSibling() 当前节点上个同胞节点