MooTools for Beginners Part 4 - Selecting and Manipulating DOM Elements

By Ryan Florence, published 2010-01-12

Part of the issue MooTools for Beginners (1.2).

Most of the time the whole point of using mootools is to manipulate an element or collection of elements. (But not always, as you’ll see in Part 5.) Now that you know some basics we’re going to get more in depth by learning the various ways to select dom elements to manipulate them–traversing the dom, as it were.

Selecting DOM Elements

The most common ways to select an element or elements are to use the dollar function and pass in the string for the id of an element or to use the dollars function and pass in a CSS 3 selector:

var el = $('someElementId'); // single element
var someElements = $$('ul#fancy > li.css3'); // element collection

Once you’ve got an element you can do some other cool stuff to find other elements.

$('someElement').getElement('form'); // returns the first match
el.getElements('li.css3 > b.selector'); // returns all matches
el.getParent(); // very helpful
el.getPrevious(); // gets the previous element
el.getNext(); // duh
el.getAllNext(); // every sibling after
el.getChildren(); // but not grandchildren

It’s pretty obvious how to go down and select children elements, but note getParent, that’s how you go back up. Chain that with getNext or getPrevious and you can get yourself pretty much anywhere.


In all of these you can pass in a CSS selector to match exactly what you want:


And speaking of operators (that’s the = in the selector), we can do all of this:

el.getElements('div[title*=row]'); // contains `row`: ie `row-5`, `row-345`, `84row30`
el.getElements('div[class^=row]); // starts with `row`: ie `row-5` but not `joe-row-50`

Here they all are:

Crazy selector demo

Something a little unexpected – a list filter using selectors

That’s pretty sweet for using hardly anything other than a selector. Now, I have to come clean here, this isn’t really the best way to do something like this–but it’s a great demonstration of how to select elements with mootools.

Notice inside of the filterList function we’ve got this code:


$$ returns an array of elements. When you call a method on an array it will automatically enumerate over every element in the array. Pretty nice, I think. However, it can cause a bad habit:

// bad habit
$$('li').setStyle('display','none').fade('hide').set('title', title).fade('in');

That is going to do four loops over every element in the array. That’s dumb. Instead you should use each if you need to do more than one thing to the elements.

$$('li').each(function(element, index){
  element.setStyle('display','none').fade('hide').set('title', title).fade('in');

Now we just do one loop. Much easier on the browser.

Speed up your selectors

Sometimes you see code out in the wild that is selector happy:

// Bad

$('otherDiv').set('tween',{duration: 1000})

// elsewhere on the page

It’s better to cache your elements and then call methods on the reference, or if you’re only messing with it once, chain the methods together.

// Good

var otherDiv = $('otherDiv').set('tween',{duration: 1000}).fade('hide');
// elsewhere on the page

Notice that var = otherDiv still gets the element even though we chained a couple methods on it. Each of those methods returns the element so the reference is correct. In fact, that’s the very reason chaining works at all.

Chistoph Pojer has even more tips here to speed up your site. General rule of thumb is to select things just once, and start close by including more information rather than less in your selector.


MooTools in this article

Hi, I'm Ryan!

South Jordan, UT

About Me

I'm a front-end web developer from Salt Lake City, Utah and have been creating websites since the early 90's. I like making awesome user experiences and leaving behind maintainable code. I'm active in the JavaScript community writing plugins, contributing to popular JavaScript libraries, speaking at conferences & meet-ups, and writing about it on the web. I work as the JavaScript guy at Instructure.