JS高级程序设计——第12章 DOM2和DOM3 12.3 遍历

最新推荐文章于 2024-11-13 01:18:00 发布

YuTong_

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量197

点赞数

分类专栏： # 第十二章 DOM2和DOM3 文章标签： javascript

本文链接：https://blog.csdn.net/YuTong_/article/details/105117627

版权

本文详细介绍了JavaScript中的DOM遍历机制，重点讲解了NodeIterator和TreeWalker两种遍历方式，包括它们的工作原理、创建方法、遍历规则以及过滤器的使用。通过实例代码展示了如何使用这两种工具进行深度优先遍历DOM树，帮助开发者更有效地操控DOM结构。

摘要由CSDN通过智能技术生成

第12章 DOM2和DOM3 12.3 遍历

一、遍历原理
二、NodeIterator
三、TreeWalker
- - - 1、TreeWalker提供的方法
    - 2、创建TreeWalker对象

一、遍历原理

NodeIterator 和 TreeWalker结构类型：“DOM2 级遍历和范围”模块定义了两个用于辅助完成顺序遍历 DOM 结构的类型。这两个类型能够基于给定的起点对 DOM 结构执行深度优先(depth-first)的遍历操作。
在与 DOM 兼容的浏览器中(Firefox 1 及更高版本、Safari 1.3 及更高版本、Opera 7.6 及更高版本、Chrome 0.2 及更高版本)，都可以访问到这些类型的对象。IE 不支持 DOM 遍历。使用下列代码可以检测浏览器对 DOM2 级遍历能力的支持情况。

var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0"); 
var supportsNodeIterator = (typeof document.createNodeIterator == "function"); 
var supportsTreeWalker = (typeof document.createTreeWalker == "function");

遍历以给定节点为根，不可能向上超出 DOM 树的根节点。以下面的 HTML 页面为例。

任何节点都可以作为遍历的根节点。如果假设<body>元素为根节点，那么遍历的第一步就是访问<p> 元素，然后再访问同为<body>元素后代的两个文本节点。不过，这次遍历永远不会到达<html>、<head> 元素，也不会到达不属于<body>元素子树的任何节点。

下图展示了对以 document 为根节点的 DOM 树进行深度优先遍历的先后顺序。

从 document 开始依序向前，访问的第一个节点是 document，访问的最后一个节点是包含 "world!"的文本节点。从文档最后的文本节点开始，遍历可以反向移动到 DOM 树的顶端。此时，访问的第一个节点是包含"Hello"的文本节点，访问的最后一个节点是 document 节点。NodeIterator 和 TreeWalker 都以这种方式执行遍历。