What is the difference between $('id') and $('#id') in Mootools?

Question

For those who, like me, are used to jQuery, the existence of two functions to select elements in Mootools seems a little confusing.

Whereas I have some element like

<div id="id">Conteúdo</div>

What’s the difference between using

$('id') 

and

$$('#id')

to select this element? The return of the two functions is equal? The first would be faster than the second?

Answer 1

The difference in this case is:

• $ returns one object
• $$ returns a collection (array type) with one object.

What are these methods`?

$('teste') === $$('#teste')[0] // true
$('teste') === document.getElementById('teste') // true

$ or Document.id

No Mootools $('id') is the corresponding to document.getElementById(). The method accepts a string that must be the ID of an element. This method always gives an object. If no object is found it returns null.

Can be used in the form $('id') or document.id('id') (more secure so as not to create incompatibilities with other libraries).

$$

$$ is the native method document.querySelectorAll, with a few more extras. For more browsers before the .querySelectorAll it combines other native methods to search for elements in the DOM. This method always returns an array/collection of Elements and accepts CSS selectors. The Mootools (Slick) search engine accepts a few more selectors, for example div !> ul, which is an inverse selector of >.

If the $$ (dollar double) find no DOM element it returns an empty array. Note that [] has a boolean value true, hence that using $$ should combine with .length if we want to have a boolean of the search.

Performance

The $ (or Document.id) method is the simplest of the two. However, since $$ allows CSS selectors and the $ is only for Ids they work differently. Regarding performance I have been testing now in IE, Firefox and Chrome and give different results. In IE wins the $ and in others the $$m, all with differences below 5%... I conclude that are +/- similar.

Note: as Mootools is a library that extends the prototype can also be used native methods combined with Mootools and then it gets a lot faster.

Test $ vs $$: http://jsperf.com/seletoresdomootools

In practice:

Fetch the contents of <div id="id">Conteúdo</div>:

var conteudo = $('id').get('html');                         // dá-me "Conteúdo"
var conteudo = document.getElementById('id').get('html');   // dá-me "Conteúdo"
var conteudo = document.getElement('#id').get('html');      // dá-me "Conteúdo"
var conteudo = $$('#id').get('html');                       // dá-me ["Conteúdo"]

Related:

In Mootools there is another method: document.getElement, it has the functionalities of $$ but returns an object like the $, the first you find.

Also related: a Dimitar’s answer on Soen