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.

example:

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

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";
}
});