如何使用Puppeteer获取指定元素

Question

一页有两个div:

<div class='class1'>...</div>

<div class='class1 class2'>...</div>

使用下面的代码：

let result = await page.$$eval('div.class1', nodes => {...})

得到上面的两种div，我只想得到div(class='class1') .

我该怎么做？

Answer 1

根据the docs，page.$$eval使用document.querySelectorAll查找带有传递的选择器的元素，所以我们可以告诉它不检索class2:

let result = await page.$$eval('div.class1:not(.class2)', nodes => {...})

但显然这不能很好地扩展：您需要跟踪所有不应选择的 other classes 和不断更新代码。

最好只过滤那些具有完全必要的 class 名称的节点：

let result = await page.$$eval('.class1', nodes => 
    nodes.filter(node => node.className === "class1").map(node => node.textContent)
);

请注意我们如何不必在此处将 nodeList 转换为数组（例如使用 [...nodes] 或 Array.from(nodes)）并且可以立即使用 filter 和 map。那是因为 page.$$eval 方便地为我们做了。

How to use Puppeteer to get the specified element