javascript - Headless Chrome ( Puppeteer ) - 如何访问文档 Node 元素？

Question

我正在使用 phantomJs解析一些内容，从中获取一些信息(例如页面上的最大图像大小)等。我决定转到 puppeteer .我遇到了这个问题 - 在我的函数中，它在 phantomJs 上运行，他们正在使用文档 Node 元素。因此，据我所知，在 puppeteer 中，不可能从 page.evaluate 和其他函数返回 Node 元素。那么，有没有其他方法可以克服这个问题呢？或者也许我必须使用另一个图书馆？谢谢!

Answer 1

使用 Puppeteer 时需要考虑两种环境:

1. Node.js 环境
2. 页面 DOM 环境

Node.js 环境基于 Google 的 Chrome V8 JavaScript 引擎构建。

Chrome V8 describes它与 DOM 的关系:

JavaScript is most commonly used for client-side scripting in a browser, being used to manipulate Document Object Model (DOM) objects for example. The DOM is not, however, typically provided by the JavaScript engine but instead by a browser. The same is true of V8—Google Chrome provides the DOM. V8 does however provide all the data types, operators, objects and functions specified in the ECMA standard.

换句话说，DOM 并不是默认提供给 Node.js 的。

这意味着 Node.js 没有能力自行解释 DOM 元素。

这就是 Puppeteer 的用武之地。

Puppeteer 函数 page.evaluate()允许您使用 Chrome 或 Chromium 评估当前页面 DOM 上下文中的表达式。

Puppeteer documentation描述当您尝试返回不可序列化的值(如 DOM 元素)时会发生什么:

If the function passed to the page.evaluate returns a non-Serializable value, then page.evaluate resolves to undefined.

同样，这是因为 Node.js 不知道如何在没有帮助的情况下解释 DOM 元素。

因此，Puppeteer 实现了一个 ElementHandle表示页内 DOM 元素的类。

您可以使用 elementHandle.$() , elementHandle.$$() , 或 elementHandle.$x()将 ElementHandle 返回给 Node.js。

ElementHandle 类是可序列化的，因此可以在 Node.js 环境中正确解释。

因此，如果您需要直接操作一个元素，您可以在page.evaluate() 中进行。如果您需要访问元素的表示，请使用 page.$() 或其相关函数之一。