前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心！

在現代前端開發中，DOM操作始終是核心技能之一。當我們需要遍歷復雜的文檔結構時，傳統的遞歸遍歷或querySelectorAll 往往存在性能或靈活性不足的問題。

我將介紹一個被低估的強大API——TreeWalker，它能幫助我們以更高效、更靈活的方式遍歷DOM樹。

TreeWalker

TreeWalker API是DOM Level 2規范中定義的接口，提供了對文檔節點的高效遍歷能力。與簡單粗暴的 querySelectorAll 相比，它具有以下優勢：

• 惰性遍歷：按需獲取節點，節省內存
• 雙向遍歷：支持向前/向后移動
• 靈活過濾：可定制節點過濾規則
• 高性能：瀏覽器原生實現，遍歷效率更高

基本用法

創建TreeWalker實例

圖片

關鍵參數解析

whatToShow

通過位掩碼指定要包含的節點類型，常用值：

圖片

多個類型組合使用位或運算符：

圖片

filter

自定義過濾函數，返回以下值之一：

• NodeFilter.FILTER_ACCEPT
• NodeFilter.FILTER_SKIP
• NodeFilter.FILTER_REJECT

示例

示例1：收集所有標題元素

圖片

示例2：文本內容搜索高亮

圖片

高級技巧

雙向遍歷

TreeWalker 支持向前和向后遍歷：

圖片

狀態保持

TreeWalker 實例會記住當前遍歷位置，適合分步遍歷：

圖片

性能對比

我們通過基準測試比較不同方法的性能：

圖片

測試結果說明 TreeWalker 在大型文檔遍歷中具有明顯優勢

使用場景推薦

• 大型文檔處理：當需要處理數千個節點時
• 自定義遍歷邏輯：需要復雜過濾條件時
• 分塊處理：逐步處理節點避免阻塞主線程
• 無障礙功能：實現自定義的閱讀順序遍歷

兼容性

圖片