closest()只能找到第一个匹配祖先，要获取整条分支需先用它定位起始容器，再循环parentElement向上遍历并收集data-id等属性，最后reverse可得根到当前顺序。

点击展开按钮时，用 closest() 本身无法直接“找到整条分支”，因为它只向上查找**第一个匹配的祖先元素**。要获取从点击目标到根节点的完整路径（即整条分支），需结合 closest() 定位起始容器，再用循环向上遍历父级，逐个收集具有特定隐藏属性（如 data-id、data-level）的节点。

明确目标结构：树节点需有可识别的容器和数据属性

确保你的目录树 HTML 结构中，每个可折叠分支由一个带唯一标识的容器包裹（例如

），且展开按钮（如 ）位于该容器内或其子元素中。隐藏属性（如 data-id、data-path）应设在各级容器上，而非仅叶子节点。

• 错误示例： 自身有 data-id → 展开按钮不是分支代表，不能反映层级关系
• 正确做法：
• ▶...

用 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 一致