1. Web
  2. Web API
  3. TreeWalker

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>
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，并且当前节点不会改变。

规范

规范
DOM
# interface-treewalker

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.