前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心！

在現(xiàn)代前端開發(fā)中，DOM操作始終是核心技能之一。當(dāng)我們需要遍歷復(fù)雜的文檔結(jié)構(gòu)時，傳統(tǒng)的遞歸遍歷或querySelectorAll 往往存在性能或靈活性不足的問題。

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

TreeWalker

TreeWalker API是DOM Level 2規(guī)范中定義的接口，提供了對文檔節(jié)點(diǎn)的高效遍歷能力。與簡單粗暴的 querySelectorAll 相比，它具有以下優(yōu)勢：

• 惰性遍歷：按需獲取節(jié)點(diǎn)，節(jié)省內(nèi)存
• 雙向遍歷：支持向前/向后移動
• 靈活過濾：可定制節(jié)點(diǎn)過濾規(guī)則
• 高性能：瀏覽器原生實(shí)現(xiàn)，遍歷效率更高

基本用法

創(chuàng)建TreeWalker實(shí)例

圖片

關(guān)鍵參數(shù)解析

whatToShow

通過位掩碼指定要包含的節(jié)點(diǎn)類型，常用值：

圖片

多個類型組合使用位或運(yùn)算符：

圖片

filter

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

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

示例

示例1：收集所有標(biāo)題元素

圖片

示例2：文本內(nèi)容搜索高亮

圖片

高級技巧

雙向遍歷

TreeWalker 支持向前和向后遍歷：

圖片

狀態(tài)保持

TreeWalker 實(shí)例會記住當(dāng)前遍歷位置，適合分步遍歷：

圖片

性能對比

我們通過基準(zhǔn)測試比較不同方法的性能：

圖片

測試結(jié)果說明 TreeWalker 在大型文檔遍歷中具有明顯優(yōu)勢

使用場景推薦

• 大型文檔處理：當(dāng)需要處理數(shù)千個節(jié)點(diǎn)時
• 自定義遍歷邏輯：需要復(fù)雜過濾條件時
• 分塊處理：逐步處理節(jié)點(diǎn)避免阻塞主線程
• 無障礙功能：實(shí)現(xiàn)自定義的閱讀順序遍歷

兼容性

圖片