Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 363
Vishal Subramanyam Avatar asked May 15 '16 05:05

Vishal Subramanyam


1 Answers

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.

like image 54
Alexander O'Mara Avatar answered Nov 06 '22 06:11

Alexander O'Mara