如何用JavaScript结合node-html-parser选取元素之前的所有兄弟元素？

解决方案思路 #

要获取分隔线之前的所有.item元素，核心步骤是：

1. 定位到分隔线元素（无专属class，可通过文本内容匹配）
2. 筛选出分隔线之前的兄弟元素中的.item元素

代码实现 #

方法一：通过previousSibling遍历前置兄弟元素

const { parse } = require('node-html-parser');

const html = `
<div class="content">
  <div class="item">1</div>
  <div
    style="
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-family: PingFangSC;
    "
  >
    DIVIDER LOLZ
  </div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
`;

// 解析HTML文档
const root = parse(html);
const contentContainer = root.querySelector('.content');

// 定位分隔线元素（匹配文本内容，去除首尾空白）
const divider = contentContainer.childNodes.find(node => 
  node.nodeType === 1 && node.textContent.trim() === 'DIVIDER LOLZ'
);

if (divider) {
  const targetItems = [];
  let currentPrev = divider.previousSibling;

  // 遍历所有前置兄弟元素
  while (currentPrev) {
    // 筛选出class为item的元素节点
    if (currentPrev.nodeType === 1 && currentPrev.classList.contains('item')) {
      targetItems.unshift(currentPrev); // 保持元素原有顺序
    }
    currentPrev = currentPrev.previousSibling;
  }

  // 输出结果
  console.log(targetItems.map(item => item.textContent.trim())); // 输出: ["1"]
}

方法二：通过父元素的子元素数组切片筛选

const { parse } = require('node-html-parser');

const html = `
<div class="content">
  <div class="item">1</div>
  <div
    style="
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-family: PingFangSC;
    "
  >
    DIVIDER LOLZ
  </div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
`;

const root = parse(html);
const contentContainer = root.querySelector('.content');

// 只保留父元素下的元素节点（排除文本/注释节点）
const elementChildren = contentContainer.childNodes.filter(node => node.nodeType === 1);
// 找到分隔线在元素数组中的索引
const dividerIndex = elementChildren.findIndex(child => child.textContent.trim() === 'DIVIDER LOLZ');

if (dividerIndex !== -1) {
  // 截取分隔线之前的元素，再筛选出.item元素
  const targetItems = elementChildren.slice(0, dividerIndex).filter(child => child.classList.contains('item'));
  console.log(targetItems.map(item => item.textContent.trim())); // 输出: ["1"]
}

说明 #

• 通过文本内容匹配定位分隔线比依赖样式更稳定，避免样式变动导致定位失效
• 方法一适合动态DOM结构，方法二逻辑更直观，适合固定结构的文档

内容的提问来源于stack exchange，提问作者BurgerBurglar