如何使用 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： p>

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

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

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

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

注意我们在这里不必将 nodeList 转换为数组（例如使用[...nodes] 或Array.from(nodes)），并且可以立即使用过滤器和映射。那是因为page.$$eval 方便地为我们做这件事。