Notice: moo.dom has been replaced by mootools. Go get it now.

moo.dom is a very lightweight (less than 3kb!) and effective script, to target html elements using javascript and css selectors.

It uses prototype.js, or the light version (also included in moo.fx), and works perfectly with Firefox, Internet Explorer, Safari and Opera.

For the impatients there is a test page, and dont forget to view the source.

Continue reading for some sort of documentation.

I’ve been working on this for quite some time, and in the latest revision I’ve decided to extend the javascript Objects Array and String instead of using a custom Object, to allow maximum flexibility.

The core of the script is without any doubt the $S function.

The $S function is used to dynamically select a collection of elements. It takes as parameters an arbitrary number of css selectors, or real elements. Some examples:

//this will select all span elements with class="myspan"

var spans = $S('span.myspan');

//this will select all div elements with class="mydiv" 
//AND all a elements with class="mylink" that are inside the div with id="mydiv"

var elements = $S('div.mydiv', '#mydiv a.mylink');

//please note you can also combine selectors and real elements

var myDiv = document.getElementById('mydiv');
var myElements = $S('div.mydiv', 'a.mylink', myDiv);

//You can use much more complicated selectors.

var myOtherElements = $S('div.mydiv #myid a.mylink span b.bold');

Another cool feature of moo.dom is the use of actions. Actions are used to attach a set of events to any collection of elements, not just the ones you select with the $S function. This is the syntax:

$S('span.myspan').action ({
//the initialize function takes place immediately, if some elements are found.
  initialize: function(){ 
//all spans with class=myspan will have "hello" as innerHTML.
    this.innerHTML = "hello";
  }
});

Note that the keyword ‘this’ always refers to the current element in the array.

Optionally you can also use functions as onclick and onmouseover inside the action. Every function beginning with on will be threaten as an event.

$S('span.myspan').action ({
    initialize: function(){ 
        this.innerHTML = "hello";
    }
//when I click on any spans with class=myspan it will become blue.
  onclick: function(){
 //inside events, use this as the current element.
    this.style.color = "blue";
  }
});

As said before, I’ve decided to extend The native javascript objects String and Array to allow maximum flexibility: Every function in moo.dom infact can be used if required. For example, if you need to filter a collection of elements by its container, and you only have the element reference (not an ID or class) you can use the getElementsBySelector method of the String object:

'a.link span'.getElementsBySelector(filterElement);

Same principle, if you already have your collection of elements, you can apply actions to them. Feel free to digg through the source code of this script to get an idea of the multiple functions you can use.

So, view the example page and download the script. Bye till next time!