javascript - Puppeteer 中的 jsHandle 和 elementHandle 有什么区别？

Question

我一直在阅读 Puppeteer API 文档，他们有 jsHandle 和 elementHandle(他们说这是 jsHandle 的扩展)。

好像page.evaluateHandle page.$ page.$$这样的函数都可以返回jsHandle/elementHandle，这就像一个存在于页面中的对象。

那么我的问题是什么是 jsHandle/elementHandle，除了一个是另一个的扩展之外，两者之间还有什么区别？

Answer 1

The docs say :

class: JSHandle

JSHandle represents an in-page JavaScript object. JSHandles can be created with the page.evaluateHandle method.

const windowHandle = await page.evaluateHandle(() => window);

和

class: ElementHandle

extends: JSHandle

ElementHandle represents an in-page DOM element. ElementHandles can be created with the page.$ method.

const hrefElement = await page.$('a');

在 JavaScript 中，所有非基本类型都是对象。您可以在页面中引用的许多内容(例如上面示例中的 window)都是您可以获得 JSHandle 的对象。

如果您可以在网站上运行 native JavaScript 并获得对不是原始值的引用，尽管任何方法都是一个对象，它可能被包装在 Puppeteer 中的 JSHandle 中。

另一方面，ElementHandle 更为特殊。它代表一个元素。 HTMLElements 是对象，但并非所有对象都是 HTMLElements。您可以对元素(和 ElementHandle)执行一些对通用对象没有意义的方法。例如，给定一个 ElementHandle，您可以尝试在 Puppeteer 中使用 .$ 或 .$$ 选择它的后代。