$ Variable (Dollar Sign) in Chrome

$ Variable (Dollar Sign) in Chrome?

This has changed yet again, even since just last year.

The devtools console provides $ as an alias to document.querySelector, along with many other things; here's an excerpted list:

• $(selector) returns the reference to the first DOM element with the specified CSS selector. This function is an alias for the document.querySelector() function.
• $$(selector) returns an array of elements that match the given CSS selector. This command is equivalent to calling document.querySelectorAll().
• $_ returns the value of the most recently evaluated expression.
• The $0, $1, $2, $3 and $4 commands work as a historical reference to the last five DOM elements inspected within the Elements panel or the last five JavaScript heap objects selected in the Profiles panel.

...and a bunch of others.

Note how it calls $ an alias of document.querySelector, but says $$ is "equivalent" to calling document.querySelectorAll. Neither seems to be literally true; $ === document.querySelector is false, and $$ returns an array, not a NodeList.

Double dollar $$() vs Dollar sign $() in Chrome console behavior

From Chrome Developer Tools documentation:

Selecting Elements

There are a few shortcuts for selecting elements. These save you valuable time when compared to typing out their standard counterparts.

$() Returns the first element that matches the specified CSS selector.
It is a shortcut for document.querySelector().

$$() Returns an array
of all the elements that match the specified CSS selector. This is an
alias for document.querySelectorAll()

$x() Returns an array of
elements that match the specified XPath.

When you use querySelector (or $), the result is an element or null. When you use $$, the result isn't an element but an Array which can be easily iterated over. This differs from the native querySelectorAll where it returns a NodeList which is slightly harder to go over all the entries.

Regarding the quote: of course it works the same. See:

Conclusion: It's useless to quote trump. You might also end insane.

Is dollar sign defined in Javascript even without jQuery?

No you can't. It's only available in developer console in some browsers without importing jQuery library.

See https://developer.chrome.com/docs/devtools/console/utilities/#querySelector-function:

$(selector) returns the reference to the first DOM element with the specified CSS selector. When called with one argument, this function is an alias for the document.querySelector() function.

Here is a simple example:

console.log($('#div'));

<div id="div"></div>

What does dollar sign means when inspecting an element?

$0 is a reference to the selected element.
For example, if you type jQuery($0).hide() into the console, it will hide the element. (assuming jQuery is included).

or you could do console.log($1) to log to the console the previous element that was selected (up to 4 in history ($1, $2, $3, $4).

See Chrome's notes on the history

Now to answer your question.
This could be useful for inspecting/debugging your website, but as it is only used in the console itself, other applications might be limited.

What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?

It's the last selected DOM node index. Chrome assigns an index to each DOM node you select. So $0 will always point to the last node you selected, while $1 will point to the node you selected before that. Think of it like a stack of most recently selected nodes.

As an example, consider the following

<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>

Now you opened the devtools console and selected #sunday, #monday and #tuesday in the mentioned order, you will get ids like:

$0 -> <div id="tuesday"></div> 
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>

Note:
It Might be useful to know that the node is selectable in your scripts (or console), for example one popular use for this is angular element selector, so you can simply pick your node, and run this:

angular.element($0).scope()

Voila you got access to node scope via console.

What is the source of the double-dollar sign selector query function in Chrome/Firefox?

Well, Firebug Lite defines this as:

this.$$=function(selector,doc){if(doc||!FBL.Firebug.chrome){return FBL.Firebug.Selector(selector,doc)

(See the source.)

The full version of Firebug defines this as

this.$$ = function(selector)
{
    return FBL.getElementsBySelector(baseWindow.document, selector);
};

This is actually documented and yes, it is used internally as well.

So I assume that Google Chrome is doing something similar.

What is the dollar sign in Javascript, if not jQuery

1) Is it correct that dollar sign was not assigned, a few years back, or do I remember wrong?

That's correct and still true.

2) What is the dollar sign, if not jQuery?

Firefox and Chrome implement $, $$ and several others as helper commands. Both will set $$ to document.querySelectorAll(), and set $ to document.querySelector if window.$ hasn't been defined.

So what you're seeing isn't actually standard JavaScript, but a helper in the developer console of your browser. It's also not jQuery (as long as you're not on a page using jQuery). However, it's behaviour is close to the one of jQuery, concerning that querySelector (for single matches) and querySelectorAll (for multiple matches) give you almost the same strength as the jQuery selector.

---

Related Topics