如何使用 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);
}

- Googlebot

---

有什么问题？它返回了什么错误？ - Sam H

Answer 1

问题

元素句柄是在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，并执行给定的函数以返回其属性。

- Thomas Dondorf

---

在这种情况下，它可能很有用，因为它们具有一个图像子元素，但如果我有多个图像，如何获取所有的src？const tds = await aliexpress.$$('div > img'); const data = await Promise.all(tds.map(async img => await img.getProperty('src')));但是我不想使用.page.evaluate。 - Paulo Costa

Answer 2

你可以使用函数 $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);
}

- hardkoded