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

Question

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

似乎 page.evaluateHandle page.$ page.$$ 都可以 return 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 的对象。

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

ElementHandle则比较讲究。它代表一个元素。 HTMLElements 是对象，但并非所有对象都是 HTMLElements。您可以对元素（和 ElementHandle）执行一些对通用对象没有意义的方法。例如，给定一个 ElementHandle，您可以尝试在 Puppeteer 中使用 .$ 或 .$$ select 它的后代。