当前位置：首页 > news >正文

DOM TreeWalker API 详解

news 2025/5/1 2:32:09

DOM TreeWalker API 详解

TreeWalker API 是 DOM 中一个强大但相对较少使用的功能，它提供了一种有效遍历文档树的方式。它比手动递归或使用简单的节点导航方法更加灵活和高效。

TreeWalker 基本概念

TreeWalker 对象可以让你按照指定的过滤条件，以特定的顺序遍历 DOM 树中的节点。它主要通过 document.createTreeWalker() 方法创建。

创建 TreeWalker

const treeWalker = document.createTreeWalker(root,           // 开始遍历的根节点whatToShow,     // 位掩码，指定要包含哪些节点类型filter,         // 可选的 NodeFilter 对象或函数entityReferenceExpansion // 布尔值，在HTML DOM中通常忽略
);

whatToShow 常量

whatToShow 参数是一个位掩码，用于指定要访问的节点类型：

NodeFilter.SHOW_ALL: 显示所有节点类型
NodeFilter.SHOW_ELEMENT: 显示元素节点
NodeFilter.SHOW_TEXT: 显示文本节点
NodeFilter.SHOW_COMMENT: 显示注释节点
等等…

过滤器

过滤器可以是一个实现了 acceptNode() 方法的对象，或者一个返回接受状态的函数：

NodeFilter.FILTER_ACCEPT: 接受该节点
NodeFilter.FILTER_REJECT: 拒绝该节点及其子树
NodeFilter.FILTER_SKIP: 跳过该节点，但考虑其子节点

TreeWalker 方法

一旦创建了 TreeWalker，可以使用以下方法进行导航：

currentNode: 获取或设置当前节点
parentNode(): 移动到父节点并返回它
firstChild(): 移动到第一个子节点并返回它
lastChild(): 移动到最后一个子节点并返回它
nextNode(): 移动到下一个节点（按文档顺序）并返回它
previousNode(): 移动到上一个节点并返回它
nextSibling(): 移动到下一个兄弟节点并返回它
previousSibling(): 移动到上一个兄弟节点并返回它

实际应用示例

示例1：查找所有文本节点

// 创建一个只显示文本节点的 TreeWalker
const walker = document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false
);const textNodes = [];
let currentNode;// 遍历所有文本节点
while (currentNode = walker.nextNode()) {// 忽略空白文本节点if (currentNode.nodeValue.trim() !== '') {textNodes.push(currentNode);}
}console.log(`找到 ${textNodes.length} 个非空文本节点`);

示例2：使用自定义过滤器

// 创建一个自定义过滤器，只接受具有特定类的元素
const filter = {acceptNode: function(node) {// 只接受带有 "highlight" 类的元素if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('highlight')) {return NodeFilter.FILTER_ACCEPT;}return NodeFilter.FILTER_SKIP;}
};const walker = document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,filter,false
);const highlightedElements = [];
let currentNode;while (currentNode = walker.nextNode()) {highlightedElements.push(currentNode);
}console.log(`找到 ${highlightedElements.length} 个高亮元素`);

示例3：深度优先遍历

function traverseDOM(root) {const walker = document.createTreeWalker(root,NodeFilter.SHOW_ELEMENT,null,false);let depth = 0;let node = walker.currentNode;// 打印当前节点console.log(`${' '.repeat(depth)} <${node.nodeName.toLowerCase()}>`);// 递归处理子节点let child = walker.firstChild();while (child) {depth++;console.log(`${' '.repeat(depth)} <${child.nodeName.toLowerCase()}>`);// 尝试进入更深层if (walker.firstChild()) {continue;}// 没有子节点，尝试下一个兄弟节点while (!walker.nextSibling() && depth > 0) {// 回到父节点层级walker.parentNode();depth--;}}
}traverseDOM(document.body);