In order to successfully and effortlessly write unobtrusive JavaScript, we must have a way to point to the Document Object Model (DOM) elements that we want to manipulate. The DOM is a representation of objects in our HTML and a way to access and manipulate them. In traditional JavaScript, this involves a lot (like, seriously a lot) of code authoring, and in many instances, a lot of head-banging-against-wall-and-pulling-out-hair as you discover a browser quirk that you must solve.

Let me save you some bumps, bruises, and hair by showing you how to select DOM elements the MooTools way. This article will cover how you can utilize MooTools to select/match simple (like, “All div elements”) up to the most complex and specific elements (like, “All links that are children of a span that has a class of awesomeLink and points to http://superAwesomeSite.com

MooTools and CSS selectors

MooTools selects an element (or a set of elements) in the DOM using CSS selectors syntax.

Just a quick refresher on CSS terminology, a CSS style rule consists of:

selector {
 property: property value; 
}

• selector: indicates what elements will be affected by the style rule.
• property: the CSS property (also referred to as attribute). For example, color is a CSS property, so is font-style. You can have multiple property declarations in one style rule
• property value: the value you want assigned to the property. For example, bold is a possible CSS property value of the font-weight CSS property.

For example, if you wanted to select a paragraph element with an ID of awesomeParagraph to give it a red color (in hexadecimal, this is #ff0), in CSS syntax you’d write:

#awesomeParagraph {
 color: #ff0; 
}

Also, if I wanted to increase its specificity and make sure that only paragraph elements that have an ID of awesomeParagraph is selected:

p#awesomeParagraph {
 color: #ff0;
}

You’ll be happy to know that this same syntax ports over to MooTools. What’s more is that you’ll be able to take advantage of all of CSS3’s more complex selection syntax because even though CSS3 isn’t supported by all browsers yet, MooTools supports them already. So you don’t have to learn another syntax for writing selectors, you can use your existing knowledge of CSS – awesome, isn’t it?

Working with the $() and $$() functions

The $() and $$() functions are the bread and butter of MooTools. When you’re working with unobtrusive JavaScript, you need to specify which elements you want to operate on.

The dollar and dollars functions help you do just that – they will allow you to specify what elements you want to work on.

Notice, the dollar sign $ is shaped like an S, which we can interpret to mean ‘select’.

The $() dollar function

The dollar function is used for getting an element by it’s ID, which returns a single element that is extended with MooTools Element methods or null if nothing matches. Let’s go back to awesomeParagraph in the earlier example. If I wanted to select awesomeParagraph, this is what I would write:

$('awesomeParagraph’)

By doing so, we can now operate on it by passing methods to the selection. For example, if you wanted to change its style to have a color of red. You can use the .setStyle() method which allows you to specify a CSS property and its matching property value, like so

$('awesomeParagraph').setStyle('color', '#ff0');

The $$() dollars function

The $$() function is the $() big brother (that’s why it gets an extra dollar sign). The $$() function can do more robust and complex selections, can select a group, or groups of element’s and always returns an array object, with or without selected elements in it.

Likewise, it can be interchanged with the dollar function. If we wanted to select awesomeParagraph using the dollars function, we would write:

$$('#awesomeParagraph')

Note that you have to use the pound sign (#) in this case as if you were using CSS selectors.

When to use which

If you need to select just one element that has an ID, you should use the $() function because it performs better in terms of speed than the $$() function.

Use the $$() function to select multiple elements. In fact, when in doubt, use the$$() function because it can do what the $() function can do (and more).

A note on single quotes (‘) versus double quotes (“”)
The example above would work even if we used double quotes such as $(“awesomeParagraph”) or $$(“#awesomeParagraph”) “) – but many MooTools developers prefer single quotes so they don’t have to escape characters as much (since the double quote is often used in HTML, you’ll have to do “in order not to prematurely end your strings). It’s highly recommended that you use single quotes – but hey, it’s your life!

Now, let’s see these functions in action. Let’s start with the HTML markup first. Put the following block of code in an HTML document:

<body>
 <ul id="superList">
 <li>List item</li>
 <li><a href="#">List item link</a></li>
 <li id="listItem">List item with an ID.</li>
 <li class="lastItem">Last list item.</li>
 </ul>
</body>

What we have here is an unordered list. We’ll use it to explore the dollar and dollars function. If you view this in your web browser, you should see something like this:

Time for action – selecting an element with the dollar function

Let’s select the list item with an ID of listItem and then give it a red color using the .setStyle() MooTools method.

1. Inside your window.addEvent(‘domready’) method, use the following code:

   $('listItem').setStyle('color', 'red');
   

2. Save the HTML document and view it on your web browser. You should see the 3rd list item will be red.

   

3. Now let’s select the entire unordered list (it has an ID of superList), then give it a black border (in hexadecimal, this is #000000). Place the following code, right below the code the line we wrote in step 1:

   $('superList').setStyle('border', '1px solid #000000');
   

4. If you didn’t close your HTML document, hit your browser’s refresh. You should now see something like this:

   

Time for action – selecting elements with the dollars function

We’ll be using the same HTML document, but this time, let’s explore the dollars function.

1. We’re going to select the last list item (it has a class of lastItem). Using the .getFirst(), we select the first element from the array $$() returned. Then, we’re going to use the .get() method to get its text. To show us what it is, we’ll pass it to the alert() function. The code to write to accomplish this is:

   alert( $$('.lastItem').getFirst().get('text') );
   

2. Save the HTML document and view it in your web browser (or just hit your browser’s refresh button if you still have the HTML document from the preview Time for action open). You should now see the following:

   

Time for action – selecting multiple sets of elements with the dollars function

What if we wanted to select multiple sets of elements and run the same method (or methods) on them? Let’s do that now.

1. Let’s select the list item that has an <a> element inside it and the last list item (class=”lastItem”) and then animate them to the right by transitioning their margin-left CSS property using the .tween() method.
2. Right below the line we wrote previously, place the following line:

   $$('li a, .lastItem').tween('margin-left', '50px');
   

3. View your work in your web browser. You should see the second and last list item move to the right by 50 pixels.

   

What just happened?

We just explored the dollar and dollars function to see how to select different elements and apply methods on them. You just learned to select:

• An element with an ID (#listItem and #superList) using the dollar $() function
• An element with a class (.lastItem) using the dollars $$() function
• Multiple elements by separating them with commas (li and .lastItem)

You also saw how you can execute methods on your selected elements. In the example, we used the .setStyle(), .getFirst(), get(), and .tween() MooTools methods.

Because DOM selection is imperative to writing MooTools code, before we go any further, let’s talk about some important points to note about what we just did.