用 closest 高亮树形菜单完整父分支，需从目标节点向上遍历并收集所有 .tree-node 祖先（含自身），止于 .tree-menu 根容器，统一添加 active-branch 类并配合高权 CSS 样式，切换时清除旧高亮。
用 closest 高亮树形菜单中的完整父分支，核心在于：从目标节点向上逐级查找并标记所有祖先节点（包括自身），直到到达树根或指定容器边界。
明确高亮范围和触发时机
不是所有父级都要高亮——需定义“分支”的边界。常见做法是限定在某个树容器内（如 div.tree-menu），避免误触页面其他结构。触发时机通常为点击某叶子节点或展开项时。
- 给菜单项统一加可识别的类名，例如
tree-node - 确保每个节点的 HTML 结构包含清晰的父子关系（如嵌套
ul/li或带data-level属性） - 高亮样式建议用独立 class（如
active-branch），便于 CSS 控制且不影响原有布局
用 closest 定位并向上收集所有父节点
closest 本身只返回第一个匹配的祖先（含自身），不能直接获取整条路径。因此需配合循环调用，逐步向上收集聚合节点。
- 从被点击节点开始，用
closest('.tree-node')确保起点是有效节点 - 用
while循环 +parentElement向上遍历，每层都用closest('.tree-node')判断是否仍在树内 - 把每次得到的节点存入数组，最后统一添加高亮 class
示例代码片段：
const target = event.target.closest('.tree-node');
if (!target) return;
const branchNodes = [];
let current = target;
const treeRoot = document.querySelector('.tree-menu');
while (current && current !== treeRoot) {
const node = current.closest('.tree-node');
if (!node) break;
branchNodes.push(node);
current = node.parentElement;
}
branchNodes.forEach(el => el.classList.add('active-branch'));
配合 CSS 实现视觉连贯性
仅加 class 不够，还需 CSS 确保高亮样式穿透层级、不被覆盖，并支持折叠/展开状态下的表现一致。
- 用
.tree-node.active-branch > .tree-node-label精准控制文字颜色或背景 - 若菜单有箭头图标或指示器，可通过
.active-branch::before添加小图标或边框强调 - 避免使用
!important，改用更具体的选择器提升权重，例如.tree-menu .tree-node.active-branch
清理上一次高亮，保持单一分支聚焦
用户切换节点时，必须清除旧的 active-branch，否则多个分支同时高亮会失去语义。
- 在新高亮前执行
document.querySelectorAll('.active-branch').forEach(el => el.classList.remove('active-branch')) - 更高效的做法是缓存上次高亮节点列表，在下次执行前批量移除
- 如果菜单支持多选高亮，可改为切换
toggle并用数据属性记录状态，但动态父分支通常为单焦点场景
不复杂但容易忽略的是边界控制和样式隔离。只要树结构语义清晰、CSS 权重合理、DOM 遍历止步于容器根节点，closest 就能稳定支撑整条父分支的精准高亮。
