TreeWalker

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

TreeWalker 物件表示文件子樹的節點及其位置。

可以使用 Document.createTreeWalker() 方法建立 TreeWalker。

例項屬性

此介面不繼承任何屬性。

TreeWalker.root 只讀

返回建立 TreeWalker 時指定的根 Node。

TreeWalker.whatToShow 只讀

返回一個 unsigned long，這是一個位掩碼，由描述必須顯示的 Node 型別的常量組成。不匹配的節點將被跳過，但它們的子節點可能會被包含在內（如果相關）。可能的值是：

常量	數值	描述
`NodeFilter.SHOW_ALL`	`4294967295`（即 `unsigned long` 的最大值）	顯示所有節點。
`NodeFilter.SHOW_ATTRIBUTE` 已棄用	`2`	顯示屬性 `Attr` 節點。這僅在以 `Attr` 節點作為根建立 `TreeWalker` 時才有意義。在這種情況下，它意味著屬性節點將出現在迭代或遍歷的第一個位置。由於屬性永遠不是其他節點的子節點，因此在遍歷文件樹時它們不會出現。
`NodeFilter.SHOW_CDATA_SECTION` 已棄用	`8`	顯示 `CDATASection` 節點。
`NodeFilter.SHOW_COMMENT`	`128`	顯示 `Comment` 節點。
`NodeFilter.SHOW_DOCUMENT`	`256`	顯示 `Document` 節點。
`NodeFilter.SHOW_DOCUMENT_FRAGMENT`	`1024`	顯示 `DocumentFragment` 節點。
`NodeFilter.SHOW_DOCUMENT_TYPE`	`512`	顯示 `DocumentType` 節點。
`NodeFilter.SHOW_ELEMENT`	`1`	顯示 `Element` 節點。
`NodeFilter.SHOW_ENTITY` 已棄用	`32`	遺留，不再可用。
`NodeFilter.SHOW_ENTITY_REFERENCE` 已棄用	`16`	遺留，不再可用。
`NodeFilter.SHOW_NOTATION` 已棄用	`2048`	遺留，不再可用。
`NodeFilter.SHOW_PROCESSING_INSTRUCTION`	`64`	顯示 `ProcessingInstruction` 節點。
`NodeFilter.SHOW_TEXT`	`4`	顯示 `Text` 節點。

TreeWalker.filter 只讀

返回與此 TreeWalker 關聯的 NodeFilter，用於選擇相關的節點。

TreeWalker.currentNode

是 TreeWalker 當前指向的 Node。

例項方法

此介面不繼承任何方法。

注意：在 TreeWalker 的上下文中，如果一個節點根據 whatToShow 和 filter 引數引數確定了邏輯檢視，那麼它就是 *可見* 的。（節點在螢幕上是否可見無關緊要。）

TreeWalker.parentNode()

將當前 Node 移動到文件順序中的第一個 *可見* 祖先節點，並返回找到的節點。它還將當前節點移動到該節點。如果沒有這樣的節點，或者它位於物件構造時定義的 *根節點* 之前，則返回 null，並且當前節點不會改變。

TreeWalker.firstChild()

將當前 Node 移動到當前節點的第一個 *可見* 子節點，並返回找到的子節點。它還將當前節點移動到該子節點。如果沒有這樣的子節點，則返回 null，並且當前節點不會改變。請注意，firstChild() 返回的節點取決於在例項化 TreeWalker 物件時設定的 whatToShow 的值。假設有以下 HTML 樹，如果您將 whatToShow 設定為 NodeFilter.SHOW_ALL，那麼呼叫 firstChild() 將返回一個 Text 節點，而不是一個 HTMLDivElement 物件。

html

<!doctype html>
<html lang="en">
  <head>
    <title>Demo</title>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

let walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ALL);
let node = walker.firstChild(); // nodeName: "#text"

但如果我們這樣做

let walker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
);
let node = walker.firstChild(); // nodeName: "DIV"

這同樣適用於 nextSibling()、previousSibling()、firstChild() 和 lastChild()。

TreeWalker.lastChild()

將當前 Node 移動到當前節點的最後一個 *可見* 子節點，並返回找到的子節點。它還將當前節點移動到該子節點。如果沒有這樣的子節點，則返回 null，並且當前節點不會改變。

TreeWalker.previousSibling()

將當前 Node 移動到其前一個兄弟節點（如果存在），並返回找到的兄弟節點。如果沒有這樣的節點，則返回 null，並且當前節點不會改變。

TreeWalker.nextSibling()

將當前 Node 移動到其下一個兄弟節點（如果存在），並返回找到的兄弟節點。如果沒有這樣的節點，則返回 null，並且當前節點不會改變。

TreeWalker.previousNode()

將當前 Node 移動到文件順序中的前一個 *可見* 節點，並返回找到的節點。它還將當前節點移動到該節點。如果沒有這樣的節點，或者它位於物件構造時定義的 *根節點* 之前，則返回 null，並且當前節點不會改變。

TreeWalker.nextNode()

將當前 Node 移動到文件順序中的下一個 *可見* 節點，並返回找到的節點。它還將當前節點移動到該節點。如果沒有這樣的節點，則返回 null，並且當前節點不會改變。

規範

規範
DOM # interface-treewalker

瀏覽器相容性

另見

建立方法：Document.createTreeWalker()。
相關介面：NodeIterator。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025 年 6 月 23 日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題