Question

目前，我的人偶文件中包含以下部分代码：

  const getImgSrc = await page.$eval('#ldpGallery', el => el.getElementsByTagName('img'));
  console.log(getImgSrc);

我从中得到的html是这样的：

<img data-src="https://example.com/981489624/e132d90154bc6cbc6616442c0742fc43l-m0xd-w1020_h770_q80.jpg" class="owl-lazy" src="">

我在控制台中得到的结果是：

{ '0': {},
  '1': {},
  '2': {},
  '3': {},
  '4': {} }

我正在尝试从上面的html访问data-src。在检索对象之后，我尝试了。 forEach（）和map都给我一个错误。

如何获取data-src字符串？

Answer 1

最好的方法是尝试解决所有在评估中获取的所有数据。您可以执行以下操作：

const getImgSrc = await page.$eval('#ldpGallery', el =>
    Array.from(el.getElementsByTagName('img')).map(e => e.getAttribute("data-src")));
console.log(getImgSrc);

Answer 2

问题

您的代码不起作用，因为page.$eval仅允许返回可序列化的数据（可以是stringified的数据）。您正在尝试返回带有五个DOM元素的HTMLCollection，这些元素将被序列化为空对象。

解决方案

您正试图从data-src元素内的所有img元素中读取#ldpGallery信息。我建议您为此使用功能page.$$eval，该功能可以处理元素列表。这样，您可以直接映射元素并通过dataset属性访问data属性。

代码如下：

const getImgSrc = await page.$$eval(
    '#ldpGallery img',
    imgs => imgs.map(img => img.dataset.src)
);

Puppeteer js eval函数返回对象的对象

2 个答案:

问题

解决方案