在Puppeteer

Question

我试图用Puppeteer解析的HTML看起来像这样：

<ul>
    <li class="title"> item 1 </li>
    <li class="title hide"> item 1 </li>
</ul>

我正在访问li元素，如下所示：

await page.$$eval("ul > li.title", nodes =>
    nodes.map(element => {
      return {
        //some attributes
      };
    })
  );

扩展的结果是仅检索没有class=hide的元素。不幸的是hide是title之外的一个类，它由所有<li>元素共享。

如何重构Puppeteer代码以排除具有hide类的元素？

Answer 1

只需将:not(.hide)添加到您的选择器字符串中即可：

page.$$eval("ul > li.title:not(.hide)", nodes =>

Answer 2

：not（.hide）

您应该使用:not() CSS伪类来选择不包含类.hide的元素：

await page.$$eval('ul > li.title:not(.hide)', nodes =>
  nodes.map(element => {
    return {
      // some attributes
    };
  })
);

.filter（e =>！e.matches（'。hide'））

另一方面，您也可以filter() nodes仅包含.hide选择器字符串中不是matches()的元素：

await page.$$eval('ul > li.title', nodes =>
  nodes.filter(e => !e.matches('.hide')).map(element => {
    return {
      // some attributes
    };
  })
);