Manipulating handles with JavaScript code
We talked about ElementHandle in Chapter 4, Interacting with a Page. Let's recap this concept. ElementHandle is a variable in our code pointing to a DOM element inside the page we are automating. Now it's time to know that an ElementHandle is, in fact, a JSHandle.
In the same way that ElementHandle is a variable pointing to an element in the browser, a JSHandle is a variable pointing to a variable on the page we are automating. If we think about that, the only difference between a JavaScript variable like, for instance, document.URL, and a DOM element, like document.activeElement, is that a DOM element has a visual representation, that's all. So, we can say that an ElementHandle (a DOM element) is also a JSHandle (a JavaScript variable). Inheritance 101.
We were using functions like $ or $x to get ElementHandles. Now we can also use evaluateHandle, which works like evaluate, but as Puppeteer knows that we want a pointer...