如何用puppeteer获取DIV属性？

Question

我得到的href元素a

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

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

这是为什么？我如何获取aria-label元素data-xx的属性div？

超文本标记语言

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

Answer 1

问题：DOM节点属性\xe2\x89\xa0 HTML元素属性

\n\n

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

\n\n

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

\n\n

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

\n\n

解决方案

\n\n

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

\n\n

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

\n\n

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

\n\n\n\n

为了访问该data属性，有一个额外的解决方案可用。您可以data使用名为 的特殊属性来访问这些值dataset，该属性允许读取 data-xx如下值：

\n\n

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

\n