Puppeteer 在 DOM 中使用 <span> 标签获取所有元素中的文本，仅当它具有 <sup> 子标签时

Question

这里是新手。实验木偶。我的 HTML 如下所示

<html>
<div id="container">
      <span >
        Parent Text
        <sup name="20">Child Text</sup>  
      </span>
      <span >
       Parent Text
        <sup name="20">Child Text</sup>  
      </span>
      <span >
        Parent Text
        <sup name="20">Child Text</sup>  
      </span>

    </div>
</html>

JS 文件

const list = await page.evaluate(() => {
     const spans = document.getElementsByTagName("span")[0];
     let data=[];
    for (var i = 0; i < spanEntity.children.length; ++i){
      if(spanEntity.children[i].innerText ==="Child Text"){
        data.push(spans.innerText);
      }
    }
})

这适用于第一个 span 元素。但是我怎样才能对 DOM 中的所有跨度元素执行此操作？我知道我们可以使用 querySelectorAll 来检查 DOM 中的所有跨度元素。但我不知道如何检查子节点。任何帮助将不胜感激。提前谢谢你！！

Answer 1

像下面这样调整代码，你将遍历所有span个元素：

const spans = document.getElementsByTagName("span");
let data=[];

for (var i = 0; i < spans.length; ++i){
    var sup = spans[i].getElementsByTagName("sup");

  if(sup[0].innerText ==="Child Text"){
    data.push(spans[i].innerText);
  }
}

console.log(data);

https://jsfiddle.net/praveen_tamil/6fL2wbkt

Answer 2

与 map 和 filter:

let data = await page.$$eval('span', spans => spans
  .filter(span => span.querySelector('sup'))
  .map(span => span.innerText)
)

Puppeteer 在 DOM 中使用 <span> 标签获取所有元素中的文本，仅当它具有 <sup> 子标签时

Puppeteer Getting the text within all the elements with <span> tag in DOM only if it has a <sup> child tag

javascript

puppeteer