本文介绍在 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>

目标是仅选取

之前、且同为 .item 的所有

元素（即 0 和 1），而非全部 .item 或手动遍历。

✅ 推荐方案：CSS 伪类组合选择器

核心思路是：先选所有 .item，再排除“位于 .divider 之后的 .item”。这可通过 :not(.divider ~ .item) 实现：

• .divider ~ .item 匹配所有位于 .divider 之后（不一定是紧邻）、且同属 .content 下级的 .item 元素；
• :not(...) 则反向筛选出不满足该条件的 .item——即 .divider 之前的 .item。

完整代码示例（兼容 node-html-parser 及浏览器环境）：

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

// 使用 node-html-parser（v5+）
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 选择器，但需确保层级明确
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>"

⚠️ 注意事项：

• 选择器 .content > .item:not(.divider ~ .item) 中的 > 是关键：它限定 .item 必须是 .content 的直接子元素，避免误匹配嵌套结构；
• .divider 元素本身必须存在于 DOM 中且具有可识别的选择器（如 .divider 类），否则 ~ 无法定位上下文；
• 若分隔符无固定类名（如仅靠内联样式识别），建议先用 querySelector 定位分隔符，再通过 previousElementSibling 循环获取前序兄弟节点——此时 CSS 方案不再适用，需改用 JavaScript 遍历逻辑。

✅ 替代方案：JavaScript 原生遍历（无 CSS 依赖）

当分隔符无稳定类名时，可结合 Array.from() 与 indexOf() 实现健壮逻辑：

const content = document.querySelector('.content');
const divider = Array.from(content.children).find(el => 
  el.textContent.trim() === 'DIVIDER LOLZ' && 
  getComputedStyle(el).display === 'flex'
);
if (divider) {
  const siblingsBefore = Array.from(content.children)
    .slice(0, Array.from(content.children).indexOf(divider))
    .filter(el => el.classList.contains('item'));
}

总结：优先使用 :not(.target ~ .candidate) 模式实现声明式筛选，简洁、高效、可读性强；仅在动态/非标准场景下回退至命令式遍历。该技巧广泛适用于前端数据提取、内容分区、模板渲染等场景。