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

Question

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:

@VishalSubramanyamRajesh that means it is not jQuery's $() function but the native $() selectors — Deepak Kamat, May 15 '16 at 05:47
In Chrome's console, `$()` is an alias to `querySelector()`. See the duplicate. — Frédéric Hamidi, May 15 '16 at 05:48
@FrédéricHamidi I feel that this question is not an *exact* duplicate of the other question. You might rather answer this question by giving a reference to that question. Please remove the duplicate question tag. — Vishal Subramanyam, May 15 '16 at 05:50
use codepen's console, not chrome console. they are different. — YOU, May 15 '16 at 05:51
@Vishal, the very purpose of closing as duplicate is to prevent duplicate answers that "reference" one another. Providing an answer to your question would not be the right way to go I'm afraid. I do believe the other question is an exact duplicate, if you disagree, please explain why in your question or make your case on [meta]. — Frédéric Hamidi, May 15 '16 at 05:52

score 4 · Accepted Answer · answered May 15 '16 at 05:47

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.

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

1 Answers1