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.
$('element').getParent().getNext();
In all of these you can pass in a CSS selector to match exactly what you want:
el.getChildren('input[name=importantStuff]');
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:
- ’=’ : is equal to
- ’*=’: contains
- ’^=’ : starts-with
- ’$=’ : ends-with
- ’!=’ : is not equal to
- ’~=’ : contained in a space separated list
-
’ =’ : contained in a ‘-‘ separated list
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:
$$('li').setStyle('display','none');
$$ 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
$('someDiv').setStyle('color','red');
$('someDiv').fade('hide');
$('otherDiv').set('tween',{duration: 1000})
$('otherdiv').fade('hide');
// elsewhere on the page
$('otherDiv').fade('in');
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
$('someDiv').setStyle('color','red').fade('hide');
var otherDiv = $('otherDiv').set('tween',{duration: 1000}).fade('hide');
// elsewhere on the page
otherDiv.fade('in');
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.
$$(‘input[name=password]’).getParent().getParent()
