I have been reading Puppeteer API documentation, they have jsHandle and elementHandle (which they state being an extension of jsHandle).
It seems functions like page.evaluateHandle page.$ page.$$ can all return jsHandle/elementHandle which is like an object that exists in-page.
So my question what is jsHandle/elementHandle and what are the differences between the two besides one being an extension of the other?
class: JSHandle
JSHandle represents an in-page JavaScript object. JSHandles can be created with the page.evaluateHandle method.
const windowHandle = await page.evaluateHandle(() => window);
and
class: ElementHandle
extends: JSHandle
ElementHandle represents an in-page DOM element. ElementHandles can be created with the page.$ method.
const hrefElement = await page.$('a');
In JavaScript, all non-primitives are objects. Many things you can reference in a page - such as the window in the example above - are objects that you can get a JSHandle for.
If you can run native JavaScript on the website and get a reference to a value that isn't a primitive, though any method, that's an object, that could potentially be wrapped in a JSHandle in Puppeteer.
ElementHandle, on the other hand, is more particular. It represents an element. HTMLElements are objects, but not all objects are HTMLElements. There are some methods that you can do with an element (and an ElementHandle) that don't make sense with generic objects. For example, given an ElementHandle, you could try to select a descendant of it with .$ or .$$ in Puppeteer.