TreeWalker：DOM 遍历实用指南

最近我开始利用空闲时间开发一个新的 Chrome 扩展，在研究如何处理一些功能的过程中，我开始发现 JS 在处理 DOM 方面有越来越多的功能。页。

考虑到绝大多数使用 JS 的人仅通过框架来使用它，这将成为一系列短文的一个有趣主题，让人们更多地了解他们所依赖的框架的底层技术实际使用。

我们都经历过这样的情况 — 您需要在 DOM 中查找特定元素，但 querySelector 和 getElementsBy* 并不能完全解决这个问题。也许您需要查找包含特定短语的所有文本节点，或者您想要遍历符合某些条件的元素，同时跳过其他条件。输入 TreeWalker - 一个强大但经常被忽视的 DOM 遍历 API。

什么是树行者？

TreeWalker 是一个 DOM 接口，可让您高效地遍历和过滤 DOM 节点。将其视为 querySelector 等方法的更强大、更灵活的替代方法。 querySelector 为您提供与 CSS 选择器匹配的元素，而 TreeWalker 可以让您：

• 在任意方向上导航 DOM 树（向前、向后、向上、向下）
• 根据自定义条件过滤节点
• 完全跳过树的某些部分
• 直接访问文本节点（querySelector 无法做到）

创建树行者

让我们从一个基本示例开始：

const walker = document.createTreeWalker(
    document.body, // Root node to start traversal
    NodeFilter.SHOW_TEXT, // Only show text nodes
    {
        acceptNode: function(node) {
            // Only accept text nodes that aren't empty
            return node.textContent.trim().length > 0
                ? NodeFilter.FILTER_ACCEPT
                : NodeFilter.FILTER_REJECT;
        }
    }
);

这三个参数是：

1. 根节点——从哪里开始遍历
2. 要显示什么类型的节点（文本、元素、注释等）
3. 决定接受或拒绝哪些节点的过滤函数

现实世界的例子

1. 查找和替换文本

这是您实际使用的东西 - 查找和替换文本，同时保留 HTML 结构。

function replaceText(root, search, replace) {
    const walker = document.createTreeWalker(
        root,
        NodeFilter.SHOW_TEXT,
        {
            acceptNode: function(node) {
                return node.textContent.includes(search)
                    ? NodeFilter.FILTER_ACCEPT
                    : NodeFilter.FILTER_REJECT;
            }
        }
    );

    let node;
    while (node = walker.nextNode()) {
        node.textContent = node.textContent.replace(search, replace);
    }
}

// Usage
replaceText(document.body, 'old text', 'new text');

这比使用innerHTML 高效得多，并且不会破坏事件侦听器或表单输入值。

2. 自定义DOM查询

需要查找匹配复杂条件的元素？ TreeWalker 可以满足您的需求。让我们构建一些更复杂的东西 - 假设您需要找到所有 包含特定文本的元素，但前提是它们位于

内具有特定类的元素，并忽略 内的任何元素。元素：

function findElementsByComplexCondition(root, config) {
    const results = [];
    const walker = document.createTreeWalker(
        root,
        NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
        {
            acceptNode: function(node) {
                // Skip nodes we don't care about early
                if (node.nodeType === Node.ELEMENT_NODE &&
                    node.tagName === 'BUTTON') {
                    return NodeFilter.FILTER_REJECT; // Skip button and its contents
                }

                // Check for matching span elements
                if (node.nodeType === Node.ELEMENT_NODE &&
                    node.tagName === 'SPAN') {
                    // Check if parent is a div with required class
                    const parent = node.parentElement;
                    if (!parent ||
                        parent.tagName !== 'DIV' ||
                        !parent.classList.contains(config.parentClass)) {
                        return NodeFilter.FILTER_SKIP;
                    }

                    // Check if span contains the required text
                    const text = node.textContent?.toLowerCase() || '';
                    if (!text.includes(config.searchText.toLowerCase())) {
                        return NodeFilter.FILTER_SKIP;
                    }

                    return NodeFilter.FILTER_ACCEPT;
                }

                return NodeFilter.FILTER_SKIP;
            }
        }
    );

    let node;
    while (node = walker.nextNode()) {
        results.push(node);
    }
    return results;
}

这将匹配：

✅ 将匹配：

<div>



<p>❌ Won't match all of the following:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>[Rest of code examples...]</p>

<h2>
  
  
  The Swiss Army Knife of DOM Traversal
</h2>

<p>TreeWalker isn't limited to forward traversal. You can move in any direction:<br>
</p>

<pre class="brush:php;toolbar:false">// Move to next node
walker.nextNode();

// Move to previous node
walker.previousNode();

// Move to first child
walker.firstChild();

// Move to last child
walker.lastChild();

// Move to parent
walker.parentNode();

什么时候应该使用 TreeWalker？

TreeWalker 在以下情况下会发光：

1. 你需要找到文本节点（querySelector 无法做到这一点）
2. 您有复杂的过滤要求
3. 需要按照特定的顺序遍历 DOM
4. 性能很重要（TreeWalker 通常比递归 DOM 遍历更快）

TypeScript 支持

TypeScript 用户的好消息 - 类型内置于：

const walker = document.createTreeWalker(
    document.body, // Root node to start traversal
    NodeFilter.SHOW_TEXT, // Only show text nodes
    {
        acceptNode: function(node) {
            // Only accept text nodes that aren't empty
            return node.textContent.trim().length > 0
                ? NodeFilter.FILTER_ACCEPT
                : NodeFilter.FILTER_REJECT;
        }
    }
);

最后的想法

TreeWalker 是这样的 API 之一，一旦您了解了它，您就会发现自己使用的次数比您预期的要多。它对于构建辅助工具、内容管理系统或任何需要以编程方式分析或修改 DOM 内容的应用程序特别有用。

虽然乍一看可能很复杂，但 TreeWalker 的强大功能和灵活性使其值得添加到您的工具包中。下次当您发现自己编写递归 DOM 遍历函数时，请考虑 TreeWalker 是否更适合。

P.S.如果您已经做到了这一步，这里有一个专业提示：将 TreeWalker 与 MutationObserver 结合起来创建强大的 DOM 监控工具。但这是另一篇文章的主题......？

---

如果您发现本文有帮助，请随时点赞并关注以获取更多 JavaScript 提示和技巧。

Unsplash 上的封面照片由 Branko Stancevic 拍摄

Unsplash 上的封面照片由 Branko Stancevic 拍摄
Jan Gustavsson 在 Unsplash 上拍摄的猫照片

以上是TreeWalker：DOM 遍历实用指南的详细内容。更多信息请关注PHP中文网其他相关文章！