Selectors

Selectors let you find elements in the DOM using CSS paths. Note that $$ is defined in Element.js, but it only lets you get elements by tag name.

$$ is defined in Element.js, but when you include Element.Selectors.js, it becomes much more useful; you'll use it a LOT.

With Element.Selectors.js you can pass this selector any css style selector and it will return all the matching elements. The more specific you are, the faster the selection. Note that selecting items from a very large document can be CPU intensive.

$$('div'); //all the divs on the page
$$('div.myclass'); //all the divs on the page with the class 'myclass'
$$('#myElement div') //all the divs in $('myElement')
$$('div#myElement div') //the same, but faster because the type
//of input of myElement is defined
$$('div p a'); //all anchors in paragraphs in divs

You get the idea. The result should be stored if you're going to use it more than once so that the search is only performed once:

var clickers = $$('div#section a.clicker');
clickers.each(function(link) {.....});
//later something else...
clickers.filter(function(link) {.....});
//etc.

Be sure to read up on $$ as it's main function is creating instances of Elements and applying the MooTools extensions in the Element class to DOM elements.

Selectors.js allows you to also search for elements with specific attributes. For example:

//Returns all input tags with name "dialog".
$('myElement').getElements('input[name=dialog]');
 
//Returns all input tags with names ending with 'log'.
$('myElement').getElements('input[name$=log]');
 
//Returns all email links (starting with "mailto:").
$('myElement').getElements('a[href^=mailto:]');

The operands you can use in these instructions are:

• = : is equal to
• ^= : starts-with
• $= : ends-with
• != : is not equal to

Element.getElements applies a filter on the collection:

$('leftCol').getElements('li.level1');

The filter can be any css expression, just like $$.

Element.getElement just returns the first item found.

You can also pass in more than one:

$('leftCol').getElements('li.level1, li.level2');

This will return all the items that match the first selection, in order, followed by all the items that match the next one, and so on.

In addition to specifying css selectors (like 'p.someClass'), you can also use psuedo-selectors that MooTools includes.

Gets all the form inputs inside a DOM element that are not disabled.

$$('*:enabled'); //all the enabled inputs
$('myElement').getElements(':enabled'); //only the enabled inputs inside #myElement

Returns only the empty nodes.

$$('a:empty'); //all the empty anchor tags

Returns only the nodes that specifically contain text:

$$('p:contains("specifically")');
//the paragraph above

• $E (use document.getElement)
• $ES (see Element.getElement)
• Element.getElementsBySelector (see Element.getElements)
• Element.getElementsByClassName (see Element.getElements)
• Element.getElementById (see Element.getElement)