本文介绍在 dom 操作中，如何利用 css 选择器（特别是 :not() 与通用兄弟选择器 ~ 的组合）高效选取目标元素之前的所有同级兄弟元素，适用于 node-html-parser 等解析库及原生浏览器环境。
本文介绍在 dom 操作中，如何利用 css 选择器（特别是 :not() 与通用兄弟选择器 ~ 的组合）高效选取目标元素之前的所有同级兄弟元素，适用于 node-html-parser 等解析库及原生浏览器环境。
在实际 HTML 解析或 DOM 遍历场景中，常需提取“某个标志性节点（如分隔符）之前的所有同类元素”。例如，在如下结构中：
<div class="content"> <div class="item">0</div> <div class="item">1</div> <div class="divider">DIVIDER LOLZ</div> <div class="item">2</div> <div class="item">3</div> </div>
目标是仅获取 <div class="divider"> 之前的所有 .item 元素（即 0 和 1），而非全部 .item。
核心技巧：利用 CSS 选择器的排除逻辑
CSS 中 ~（通用兄弟选择器）匹配位于某元素之后的所有同级兄弟；而 :not() 可排除满足特定条件的元素。因此，.item:not(.divider ~ .item) 的含义是：
✅ 选中所有 .item 元素；
❌ 排除那些位于 .divider 之后的 .item（即 .divider ~ .item 所匹配的部分）；
→ 剩余即为 .divider 之前的所有 .item。
对应代码（兼容 node-html-parser 和浏览器环境）：
// 使用 node-html-parser 示例
const { parse } = require('node-html-parser');
const html = `
<div class="content">
<div class="item">0</div>
<div class="item">1</div>
<div class="divider">DIVIDER LOLZ</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
`;
const root = parse(html);
// 注意：node-html-parser 支持大部分标准 CSS 选择器，但需确保目标元素有明确 class
const itemsBeforeDivider = root.querySelectorAll('.content > .item:not(.divider ~ .item)');
itemsBeforeDivider.forEach(item => console.log(item.toString()));
// 输出：
// <div class="item">0</div>
// <div class="item">1</div>关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- ✅ 选择器必须基于同级关系：.item 和 .divider 必须是同一父容器下的直接子元素（或至少同级），否则 ~ 无法正确关联；
- ✅ 推荐为分隔符添加语义化 class（如 .divider），避免依赖内联样式（如原问题中无 class 的 div），提升可维护性与选择器可靠性；
- ⚠️ node-html-parser 版本需 ≥ 5.0（较新版本对复杂选择器支持更完善），旧版可能不支持 :not() 嵌套选择器，此时建议改用遍历逻辑（如 parentNode.children + Array.from().indexOf() + slice()）；
- ? 若分隔符非唯一，该选择器将排除所有 .divider 后的 .item（即取首个 .divider 之前的所有 .item），符合多数业务预期。
总结：无需手动遍历或计算索引，一条精炼的 CSS 选择器即可声明式地表达“目标元素前的所有同类兄弟”，兼具简洁性、可读性与执行效率。
