Question

我从一个有很多嵌套HTML元素的网站上抓取，但我感兴趣的是abbr元素。在我的情况下，这些abbr元素具有data-utime属性，因此将它们定义为<abbr data-utime="someValue">some other nested HTML</abbr>。因此，我想做的就是获取页面上最后一个data-utime元素的abbr属性值。

我试图做这样的事情：

const SELECTOR = 'abbr:last-child';
const result = await page.evaluate((selector) => {
  return document.querySelector(selector);
}, SELECTOR);

console.log(result);
console.log(typeof(res));
console.log(result.getAttribute('data-utime'));

但是问题是，在我得到的输出中，result只是一个空对象（{}），因此typeof(res)返回对象，当然它没有然后getAttribute函数。我相信last-child选择器也是获取页面上最后一个abbr元素的正确方法。有什么想法可以实现我想要的吗？

Answer 1

evaluate在页面上下文中运行；结果被序列化并返回。请改用$$eval：

const SELECTOR = "abbr";
const result =
      await page.$$eval(SELECTOR,
                        (elements) => elements[elements.length - 1].dataset.utime);
console.log(result);

您还可以使用evaluate并在其中调用document.querySelectorAll，但我更喜欢将选择器保留在我的Puppeteer代码中，以便我可以重用它们。

Answer 2

使用querySelectorAll('selector')，这将返回一个元素数组。要访问最后一个元素，您可以使用：

var el = document.querySelectorAll('selector');
last_elem = el[el.length-1];

如何使用querySelector获取最后一个元素？

2 个答案: