TreeWalker

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

TreeWalker 对象用于表示文档子树中的节点和它们的位置。

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

属性

这个接口不继承任何属性。

TreeWalker.root 只读

返回一个 Node ,表示新建 TreeWalker 时所声明的根节点。

TreeWalker.whatToShow 只读

返回一个 unsigned long 类型的常量位掩码,表示需要筛选的Node 类型。不匹配的节点会跳过,但其子节点,如果符合条件,则也会被包含。可能的值如下:

常量 数字值 描述
NodeFilter.SHOW_ALL 4294967295unsigned long 类型的最大值) 显示所有节点。
NodeFilter.SHOW_ATTRIBUTE 已弃用 2 显示Attr节点,这意味着使用TreeWalker访问 Attr节点时,需要让这些节点处于遍历的开始位置。这是因为这些节点不是任何节点的后代,并不处于文档树之上。
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 只读

返回一个实现 NodeFilter 接口的对象,这个对象用来挑选相关的节点。

TreeWalker.currentNode

返回 TreeWalker 当前指向的Node

方法

这个接口不继承任何方法。

备注:对于 TreeWalker,一个节点是否可见只取决于 whatToShowfilter 两个参数。(和元素是否在屏幕上可见无关。)

TreeWalker.parentNode()

移动当前 Node 到文档顺序中的第一个“可见”的祖先节点,并返回该节点。如果没有这样的节点,则会返回 null,同时也不会发生移动。

TreeWalker.firstChild()

移动当前 Node 到当前节点的第一个“可见”子节点,并返回该节点。如果没有这样的节点,则会返回 null,同时也不会发生移动。

html
<!DOCTYPE html>
<html lang="en">
  <head><title>Demo</title>
  <body>
    <div id="container"></div>
  </body>
</html>
js
let walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ALL);
let node = walker.firstChild(); // nodeName: "#text"

但如果我们这样做:

js
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,同时也不会发生移动。

规范

Specification
DOM Standard
# interface-treewalker

浏览器兼容性

BCD tables only load in the browser

参见