DOM遍历

最新推荐文章于 2022-10-06 19:44:31 发布

kalinara

最新推荐文章于 2022-10-06 19:44:31 发布

阅读量231

点赞数

分类专栏： JavaScript 文章标签：遍历 dom NodeIterat TreeWalker

本文链接：https://blog.csdn.net/kalinara/article/details/74548302

版权

JavaScript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

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() 当前节点上个同胞节点