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中文網其他相關文章！