He estado leyendo la documentación de la API de Puppeteer, tienen jsHandle y elementHandle (que afirman que es una extensión de jsHandle).
Parece que funciones como page.evaluateHandle page.$ page.$$ pueden devolver jsHandle/elementHandle, que es como un objeto que existe en la página.
Entonces, mi pregunta, ¿qué es jsHandle/elementHandle y cuáles son las diferencias entre los dos además de que uno es una extensión del otro?
clase: JSHandle
JSHandle representa un objeto JavaScript en la página. Los JSHandles se pueden crear con el método page.evaluateHandle.
const windowHandle = await page.evaluateHandle(() => window);
y
clase: ManejaElemento
extiende: JSHandle
ElementHandle representa un elemento DOM en la página. ElementHandles se puede crear con el método page.$.
const hrefElement = await page.$('a');
En JavaScript, todos los no primitivos son objetos. Muchas cosas a las que puede hacer referencia en una página, como la window en el ejemplo anterior, son objetos para los que puede obtener un JSHandle.
Si puede ejecutar JavaScript nativo en el sitio web y obtener una referencia a un valor que no sea un método primitivo, aunque cualquier método, ese es un objeto, que podría estar potencialmente envuelto en un JSHandle en Puppeteer.
ElementHandle, por otro lado, es más particular. Representa un elemento . Los HTMLElements son objetos, pero no todos los objetos son HTMLElements. Hay algunos métodos que puede hacer con un elemento (y un ElementHandle) que no tienen sentido con objetos genéricos. Por ejemplo, dado un ElementHandle, podría intentar seleccionar un descendiente con .$ o .$$ en Titiritero.