如何通过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

问题元素句柄作为Node.js和浏览器运行时之间的抽象层是必需的。实际的DOM元素不会发送到Node.js环境。这意味着当您想从元素中获取属性时，必须将数据传输到浏览器（要使用哪个DOM元素），然后再传输回（结果）。解决方案因此，结果await els[i].$('img')实际上不是DOM元素，而是链接到浏览器环境中的元素的包装器。要获取属性，您必须使用类似elementHandle.$eval以下的函数：const&nbsp;imgSrc&nbsp;=&nbsp;await&nbsp;els[i].$eval('img',&nbsp;el&nbsp;=>&nbsp;el.getAttribute('src'));这将在querySelector给定元素上运行该函数并执行给定函数以返回其属性。

Answer 2

您可以使用 $evalonst els = await page.$$('div.parent');for (let i = 0; i < els.length; i++) {&nbsp; &nbsp; const img = await els[i].$eval('img', i => i.getAttribute('src'));&nbsp; &nbsp; console.log(img);&nbsp; &nbsp; const link = await els[i].$eval('a', a => a.getAttribute('href'));&nbsp; &nbsp; console.log(link);}