Vishal Subramanyam Rajesh Vishal Subramanyam Rajesh - 5 months ago 46
Javascript Question

Why is Chrome's JS Console returning a DOM element rather than a jQuery Object?

For example, when I run the following code in Chrome's JavaScript console,


I get the following output:


As we can see, we get a DOM element rather than a jQuery object.
But when I don't use the Chrome's JS console and rather use the code directly in a webpage along with some console.log(), I get a jQuery object.

[object Object]{0: HTMLParagraphElement {...}, 1: HTMLParagraphElement {...}, ...

From the above, we can ascertain that when using Chrome's JS console directly, the selector 'always' returns a DOM element rather than a jQuery object. When I test the same piece of selector code in the Edge browser's JS console, I get the correct jQuery object. What's the problem with Chrome?

EDIT: enter image description here


By default, $ in Chrome's console is a special selector function. If you were to run just $ in the console on a page which has not loaded jQuery or anything else which overwrite $, you would see the following:

function $(selector, [startNode]) { [Command Line API] }

If however, the page has overwritten the $ value, then the console will use the value from the page. So if the page has loaded jQuery, then you will get a jQuery object.