本文介绍使用 Element.closest() 配合精确 CSS 选择器，高效获取任意深度嵌套列表中对应顶层 <li class="list-item"> 元素的方法，无需循环遍历，代码简洁且兼容性良好（支持现代浏览器及 IE11+）。
本文介绍使用 `element.closest()` 配合精确 css 选择器，高效获取任意深度嵌套列表中对应顶层 `
在处理多层嵌套的无序列表（如树形菜单、分类导航等）时，常需从当前激活项（例如带 .is-selected 类的 <li>）反向定位其最外层的“根级”列表项（即直接位于最外层 .list 下的 .list-item）。传统方案依赖 parentNode 循环查找，逻辑复杂且易出错；而现代 JavaScript 提供了更优雅的解法：closest() 方法 + 语义化 CSS 选择器。
核心思路是：顶层 <li> 的关键特征是——它的父元素为 .list，且祖父元素 不是 .list-item（即它不处于任何子级 <li> 的内部）。据此可构造精准选择器：
*:not(.list-item) > .list > .list-item
该选择器含义为：
✅ 匹配一个 .list-item 元素；
✅ 它的直接父元素是 .list；
✅ 它的祖父元素（即 .list 的父元素）不能是 .list-item（通过 *:not(.list-item) 实现通配排除）；
✅ 因此，它必然是整个嵌套结构中最外层的 .list-item。
完整实现示例：
// 获取当前选中的列表项（任意层级）
const currentListItem = document.querySelector('.list-item.is-selected');
// 一行代码直达顶层父级 li
const topLevelItem = currentListItem.closest('*:not(.list-item) > .list > .list-item');
if (topLevelItem) {
console.log('顶层列表项:', topLevelItem);
console.log('文本内容:', topLevelItem.textContent.trim()); // 输出 "Level 1"
} else {
console.warn('未找到匹配的顶层 list-item');
}⚠️ 注意事项：
- closest() 自下而上搜索，包括自身，因此即使 .is-selected 元素本身已是顶层，也能正确返回；
- 选择器中 *:not(.list-item) 是关键——它确保跳过所有中间层级的 .list-item（如 Level 2/3），只命中“根级”；
- 若 DOM 结构存在多个独立 .list 根容器，该方法仍能准确返回当前节点路径上的最近顶层项，无需额外上下文判断；
- 兼容性：Chrome 4+, Firefox 36+, Safari 9.1+, Edge 15+, IE11（需 polyfill closest）。
总结：相比手动遍历父节点，closest() 方案更声明式、更健壮、更易维护。只要语义类名（.list, .list-item）保持一致，无论嵌套多少层，均可稳定获取顶层锚点元素——这是构建可扩展树形交互组件的理想实践。
