一般在业务场景中获取dom下所有的子元素是通过遍历的形式， 比如通过for循环获取，在MDN上发现还有一个方法TreeWalker也可以实现dom子元素遍历，下面我们来具体看看。

TreeWalker对象用于表示文档子树中的节点和它们的位置。是JavaScript中的一个API，用于遍历DOM树中的节点。可以在DOM树的任何位置开始遍历，并沿着指定方向（向上、向下、向前或向后）遍历节点，直到达到指定的结束节点。可以使用Document.createTreeWalker()方法创建。

TreeWalker构造函数

语法

const walker = document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion);

参数说明：

• root：表示遍历的起始节点。通常这是文档的一个元素。
• whatToShow：表示要显示哪些节点类型。可以使用NodeFilter常量来指定。具体都有哪些类型可以查看MDN
• filter：表示要应用的自定义过滤器。
• entityReferenceExpansion：表示是否应该扩展实体引用节点。

示例

下面是一个使用TreeWalker遍历DOM树的示例代码

const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, { acceptNode: (node) => NodeFilter.FILTER_ACCEPT });
while (walker.nextNode()) {
  console.log(walker.currentNode);
}

在上面示例中首先使用document.createTreeWalker()方法创建了一个TreeWalker对象。将document.body作为起始节点，并使用NodeFilter.SHOW_ELEMENT常量指定要显示的节点类型。还传递了一个自定义过滤器，该过滤器接受所有节点。最后，使用while循环和walker.nextNode()方法遍历所有节点，并在控制台中打印每个节点。我们可以根据需要更改起始节点、要显示的节点类型和自定义过滤器来满足业务需求。

TreeWalker属性

该接口不继承任何属性

• root
• whatToShow
• filter
• currentNode

TreeWalker方法

该接口不继承任何方法

• parentNode：获取currentNode的父节点
• firstChild：获取treeWalker实例的第一个子元素
• lastChild：获取treeWalker实例的最后一个子元素
• previousSibling：获取currentNode的之前的兄弟节点
• nextSibling：获取currentNode的之后的兄弟节点
• previousNode：获取currentNode的前一个节点
• nextNode：移动currentNode 指针到下一个可见元素

参考链接：

developer.mozilla.org/zh-CN/docs/…