如何使用Puppeteer检查元素子节点是否包含指定标签

问题场景 #

使用Puppeteer提取网页价格时，原有筛选逻辑存在缺陷：

• 原逻辑通过element.children.length == 0筛选无任何子节点的纯文本叶子元素
• 实际页面中价格经常被行内样式标签包裹（如<b>加粗货币符号、<span>单独设置货币符号样式），这类元素存在子节点会被原逻辑误过滤，导致价格漏抓
  需要将校验规则调整为：目标元素不存在<div>类型的子节点即可，允许行内格式化标签存在。

原逻辑无法识别的典型DOM结构：

<div class="pricevalue1 accent-color1" style="font-size: 20px;">
   <b>
      <span class="currency-symbol">$</span>
      92,950
   </b>
</div>

原有实现代码：

var prices = await page.$$eval("div, span, p", (priceElements) => {
    var tmpPrices = [];
    for (var i = 0; i < priceElements.length; i++) {
      const priceIndex = priceElements[i].innerText.toLowerCase().indexOf("$");
      if (
        priceIndex > -1 &&
        priceElements[i].children.length == 0 &&
        priceElements[i].innerText.substring(priceIndex + 1).indexOf("$") == -1
      ) {
        tmpPrices.push(priceElements[i].innerText);
      }
    }
    return tmpPrices;
  });

实现方法 #

核心判断逻辑替换 #

1. 删除原有的children.length == 0严格限制
2. 新增!element.querySelector('div')判断：该API会匹配元素所有后代节点，只要内部不存在任何div子元素（无论嵌套多少层），就符合结构要求，<b>、<span>、<i>这类行内标签不会触发拦截
3. 可选增加价格格式正则校验、结果去重逻辑，减少误抓

修改后代码 #

const prices = await page.$$eval("div, span, p", (elements) => {
  const result = [];
  for (const el of elements) {
    const text = el.innerText.trim();
    const dollarIndex = text.indexOf("$");
    if (
      dollarIndex > -1 &&
      // 校验无div子节点
      !el.querySelector("div") &&
      // 文本内仅包含一个$符号，排除包含多价格的大容器
      text.slice(dollarIndex + 1).indexOf("$") === -1 &&
      // 校验$后为有效价格格式
      /\$\s*[\d,]+(\.\d{1,2})?/.test(text)
    ) {
      result.push(text);
    }
  }
  // 去重后返回
  return [...new Set(result)];
});

扩展调整 #

• 如果需要排除其他块级子元素（如<p>、<section>），直接修改选择器参数即可，例如同时排除div和p标签：!el.querySelector("div, p")
• 如果仅需要判断直接子元素的标签类型、不需要检查深层嵌套，可以遍历el.children集合，逐个判断child.tagName.toLowerCase() === 'div'即可

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