如何通过 Puppeteer 获得元素的子元素

Question

我知道 puppeteer 有自己的句柄而不是标准的 DOM 元素，但我不明白为什么我不能通过找到的元素继续与

相同的查询

const els = await page.$$('div.parent');

for (let i = 0; i < els.length; i++) {
    const img = await els[i].$('img').getAttribute('src');
    console.log(img);
    const link = await els[i].$('a').getAttribute('href');
    console.log(link);
}

Answer 1

您可以使用函数 $eval

const els = await page.$$('div.parent');

for (let i = 0; i < els.length; i++) {
    const img = await els[i].$eval('img', i => i.getAttribute('src'));
    console.log(img);
    const link = await els[i].$eval('a', a => a.getAttribute('href'));
    console.log(link);
}

Answer 2

问题

元素句柄作为 Node.js 和浏览器运行时之间的抽象层是必需的。实际 DOM 元素未发送到 Node.js 环境。

这意味着当您想从元素中获取属性时，必须将数据传输到浏览器（要使用的 DOM 元素）并返回（结果）。

解决方案

因此，await els[i].$('img') 的结果并不是真正的 DOM 元素，而只是在浏览器环境中链接到该元素的包装器。要获取属性，您必须使用类似 elementHandle.$eval:

的函数

const imgSrc = await els[i].$eval('img', el => el.getAttribute('src'));

这会在给定元素上运行 querySelector 函数，并对 return 其属性执行给定函数。

如何通过 Puppeteer 获得元素的子元素

How to get children of elements by Puppeteer

javascript

webautomation

node.js

puppeteer

问题

解决方案