JavaScript中无“树遍历API”，但DOM提供querySelector/querySelectorAll（推荐）、parentNode/children等属性方法、TreeWalker及getElementsBy*系列实现深度/广度优先遍历。
JavaScript 中没有专门叫“树遍历 API”的标准接口，但 DOM 提供了多种原生方法来遍历和查找节点，本质就是对 DOM 树进行深度优先或广度优先的遍历。关键不在于调用某个叫“遍历 API”的函数，而在于合理使用 Node 和 Element 接口提供的属性与方法。
用 querySelector 和 querySelectorAll 快速定位（推荐首选）
这是最常用、性能较好、语义清晰的方式，底层由浏览器高效实现，无需手动写遍历逻辑：
-
document.querySelector('input[name="username"]')—— 返回第一个匹配的元素 -
document.querySelectorAll('button[data-action]')—— 返回所有带data-action属性的按钮 - 支持复杂选择器，如
div#nav > ul li a.active，适合绝大多数查找场景
用 parentNode、children、firstElementChild 等手动遍历
当你需要自定义遍历逻辑（比如找第 N 个满足条件的节点、跳过注释/文本节点、按特定顺序处理），可结合 DOM 层级属性手动遍历：
-
element.children只返回元素子节点（忽略文本、注释） -
element.firstElementChild/lastElementChild/nextElementSibling等提供“元素级”导航，避开非元素节点 - 示例：查找某个父容器内所有带
required的input
const requiredInputs = [];
function traverse(el) {
if (el.tagName === 'INPUT' && el.hasAttribute('required')) {
requiredInputs.push(el);
}
for (const child of el.children) {
traverse(child);
}
}
traverse(container);
用 TreeWalker 进行灵活、可控的遍历
TreeWalker 是一个较底层但非常灵活的遍历工具，适合需要精细控制遍历行为的场景（如跳过某些节点类型、动态过滤）：
立即学习“Java免费学习笔记（深入）”；
- 创建方式：
document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, { acceptNode: fn }) -
acceptNode方法决定是否进入该节点；可结合walker.nextNode()或walker.firstChild()遍历 - 适合实现“查找所有含 aria-label 但不含 title 的按钮”这类复合条件
用 getElementsBy* 系列（简单但局限大）
如 getElementsById（注意是 getElementById，单数）、getElementsByClassName、getElementsByTagName，它们返回实时集合（live collection），但：
- 不支持 CSS 伪类或复杂关系选择器
-
getElementsByClassName和getElementsByTagName返回 HTMLCollection，需转数组才能用filter等方法 - 一般只在简单、性能敏感且结构固定的场景下考虑使用
