closest()只能找到第一个匹配祖先，要获取整条分支需先用它定位起始容器，再循环parentElement向上遍历并收集data-id等属性，最后reverse可得根到当前顺序。
点击展开按钮时，用 closest() 本身无法直接“找到整条分支”，因为它只向上查找**第一个匹配的祖先元素**。要获取从点击目标到根节点的完整路径（即整条分支），需结合 closest() 定位起始容器，再用循环向上遍历父级，逐个收集具有特定隐藏属性（如 data-id、data-level）的节点。
明确目标结构：树节点需有可识别的容器和数据属性
确保你的目录树 HTML 结构中，每个可折叠分支由一个带唯一标识的容器包裹（例如 <li class="tree-node" data-id="123">），且展开按钮（如 <button class="toggle-btn"></button>）位于该容器内或其子元素中。隐藏属性（如 data-id、data-path）应设在各级容器上，而非仅叶子节点。
- 错误示例：
<button></button>自身有data-id→ 展开按钮不是分支代表，不能反映层级关系 - 正确做法：
<li data-id="5" data-path="/home/docs"> <button class="toggle-btn">▶</button>...</li>
用 closest 定位当前分支根容器
点击按钮后，先用 closest() 找到它所属的最近一级树节点容器。这是后续遍历的起点：
document.addEventListener('click', function(e) {
if (e.target.classList.contains('toggle-btn')) {
const node = e.target.closest('.tree-node'); // 找到当前被操作的分支容器
if (!node) return;
// 后续从 node 开始向上收集
}
});
向上遍历 parentElement，收集整条分支的隐藏属性
从 closest 找到的节点开始，用 while 循环持续访问 parentElement，直到没有父级或超出树根范围（例如到达 .tree-root 或 ）。每一步检查当前元素是否有目标属性，并存入数组：
const branchData = [];
let current = node;
while (current && !current.matches('.tree-root') && current !== document.body) {
if (current.hasAttribute('data-id')) {
branchData.push({
id: current.dataset.id,
path: current.dataset.path,
level: current.dataset.level
});
}
current = current.parentElement;
}
// branchData 数组现在包含从当前节点到根的完整分支（顺序为：当前→父→祖父…）
若需“从根到当前”的顺序，最后调用 branchData.reverse() 即可。
注意边界与性能细节
避免无限循环或越界访问：
- 用
matches('.tree-root')或classList.contains('tree-root')明确终止条件，不要依赖模糊的类名（如只写'ul'） - 不推荐用
parentNode—— 它可能返回文本节点；始终用parentElement - 如果树是动态渲染的（如 Vue/React），确保事件委托绑定在静态父容器上，并确认
closest查询的类名与实际 DOM 一致
