68

I was working with the developer tools of google chrome on a page without jQuery (or any other library that uses the $ sign as a shortcut). When I inspected $ by the console (by just typing it in and hitting enter), i got this:

$
function () { [native code] }

So, chrome has some native function that can be referenced by $. Only chrome seems to have this one and i cannot access it via window['$'] nor via document['$'] or this['$'].

I was not able to find out what this function is. Do you know what it does and maybe have some background information on this? Thanks in advance!

Dennis
  • 14,210
  • 2
  • 34
  • 54
  • Information can be found at https://developers.google.com/chrome-developer-tools/docs/console and https://getfirebug.com/wiki/index.php/Command_Line_API. – Felix Kling Aug 02 '12 at 13:36
  • What URL & what version of Chrome? I found a page that doesn't use jQuery and does not alias `$` (it was surprisingly hard), but I don't see `function () { [native code] }`. Were you paused at a breakpoint? – Matt Ball Aug 02 '12 at 13:39
  • 1
    @Matt Ball You can just open `about:blank`, open the console and type `$` then hit enter. – Dennis Aug 02 '12 at 13:44
  • Possible duplicate of: [What is the source of the double-dollar sign selector query function in Chrome /Ffirefox?](http://stackoverflow.com/questions/8981211) – hippietrail Nov 16 '12 at 05:05
  • This question was extremely difficult to Google for since Google ignores special characters like $; should we change the title to something that is more SEO-able? Maybe include a phrase like "dollar sign", because that's what I've been using. – tjhorner Oct 29 '21 at 20:03
  • 1
    @tjhorner Thanks for the suggestion, I added the phrase 'dollar sign' in the title. – Dennis Dec 28 '21 at 07:34

6 Answers6

60

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.

Till Ulen
  • 1,759
  • 1
  • 17
  • 17
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
29

It is one of the Chrome Developer Tools functions (so not available from the page). You can see documentation for it on the Console page.

It gets an element by a selector.

Firefox implements something similar

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
21

The existing answers are outdated, $ is not an alias for document.getElementById or document.querySelector, but a wrapper for querySelector. This wrapper actually takes an optional second argument for the element to query the child of.

For Chrome this family of functions is documented under the Console Utilities API reference:

$(selector [, startNode])

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

$$(selector [, startNode])

$$(selector) returns an array of elements that match the given CSS selector. This command is equivalent to calling Array.from(document.querySelectorAll()).

$x(path [, startNode])

$x(path) returns an array of DOM elements that match the given XPath expression.

Firefox also documents their implementation of these functions under Web Console Helpers (currently the same except $x allows a 3rd argument).

I don't know if/where Safari/WebKit documents it, but it also implements them the same as Chrome.

Note that these values are only the default values within the console versus the page itself. For example if the page sets the variable by including jQuery that variable will take precedent and the console will use the value from the page itself so that $('p') will return a jQuery object rather than just the first p element.

Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
  • 2
    Link is outdated, these functions are now documented [here](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference). Also note that `$$()` returns an `Array`, unlike `document.querySelectorAll()` which returns a `NodeList`. – nollidge Mar 08 '17 at 21:40
  • And the [current documentation](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#queryselector) calls `$` an "alias" for `document.querySelector` (although that doesn't seem to be true; at least, `$ === document.querySelector` is `false`). – T.J. Crowder Nov 14 '17 at 16:44
8

Judging by the link to the dev tools it is now uses document.querySelector() rather than just getElementById().

AlbertEngelB
  • 16,016
  • 15
  • 66
  • 93
6

https://developers.google.com/chrome-developer-tools/docs/console

It's just quick access to document.getElementById.

oryol
  • 5,178
  • 2
  • 23
  • 18
5

Ther're two selectors in Webkit inspectors, the same that Mootools one : $ and $$

You can find some informations on it, here

They're juste here to help you in debug.

zessx
  • 68,042
  • 28
  • 135
  • 158