1. 面向开发者的 Web 技术
  2. Web API
  3. TreeWalker

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

TreeWalker

基线 广泛可用

自 2015年7月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

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

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

属性

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

TreeWalker.root 只读

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

TreeWalker.whatToShow 只读

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

常量 数字值 描述
NodeFilter.SHOW_ALL 4294967295（unsigned 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，一个节点是否可见只取决于 whatToShow 和 filter 两个参数。（和元素是否在屏幕上可见无关。）

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

规范

规范
DOM
# interface-treewalker

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题