如何使用 puppeteer 获取 DIV 属性？

Question

我通过

得到了a个元素中的href个

const hrefs = await page.evaluate(() => 
Array.from(document.body.querySelectorAll('a'), ({ href }) => href));

但是当我尝试获取 aria-label 或 data-xx 个 div 元素时，此方法不起作用。

为什么会这样？如何获得 div 元素的 aria-label 或 data-xx 属性？

HTML

<div class="test" arial-label="something" data-all="something">
</div>

Answer 1

问题：DOM节点属性≠HTML元素属性

只有部分 HTML 属性在 DOM 节点上公开。甚至暴露的节点也可能包含不同的值：DOM 节点的 href 属性与写入 HTML (<a href="..."></a>) 的属性不同。举个例子：

<a id="link" href="test.html">Link</a>

访问 document.querySelector('#link').href 将 return 完整路径（例如 http://example.com/test.html）而不是 test.html。要获取原始元素属性，您必须使用函数 getAttribute.

解决方案

回到您的代码，这意味着您可以像这样使用 getAttribute 来阅读 aria-label 和 data-all：

Array.from(document.body.querySelectorAll('div'), (el) => el.getAttribute('aria-label'));

Array.from(document.body.querySelectorAll('div'), (el) => el.getAttribute('data-all'));

---

要访问 data 属性，还有一个可用的附加解决方案。您可以使用名为 dataset 的特殊属性访问 data 值，它允许像这样读取 data-xx 的值：

Array.from(document.body.querySelectorAll('div'), (el) => el.dataset.xx);