本文介绍在 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 及浏览器环境）：

// 使用 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>"

⚠️ 注意事项：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 选择器 .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) 模式实现声明式筛选，简洁、高效、可读性强；仅在动态/非标准场景下回退至命令式遍历。该技巧广泛适用于前端数据提取、内容分区、模板渲染等场景。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！