Vishal Subramanyam Rajesh Vishal Subramanyam Rajesh - 6 months ago 68
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,

$("p")


I get the following output:

<p>...</p>


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

Answer

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.