Java Reference
In-Depth Information
</script>
</body>
</html>
Save this as
ch17 _ example5.html
and load it in your browser. When you click the button, the
background color should change to yellow, and “Hello, MooTools!” should display in the page. If
not, make sure the MooTools' JavaScript file is located in the same directory as your HTML page.
finding elements
Earlier, we mentioned that MooTools'
$()
function is similar to Prototype's. Well, let's clear it up
now; they are exactly the same. They find the element object in the DOM and extend it, albeit with
different methods that you'll see in the following sections. For example, the following code finds an
element with an
id
of
myDiv
, extends it with MooTools' methods and properties, and returns it:
var element = $("myDiv");
With this object, you can use MooTools' extension methods as well as the native DOM methods and
properties:
var tagName = element.tagName; // standard DOM
element.appendHTML("New Content"); // extension
If an element with the given
id
does not exist,
$()
returns
null
.
You can also pass a DOM object to the
$()
function to extend it as well:
var body = $(document.body);
Selecting elements with CSS Selectors
MooTools has the
$$()
function to select elements with CSS selectors, and you can pass multiple
CSS selectors to retrieve a wide variety of elements. Like Prototype, you pass each selector as an
argument to the function:
var classOne = $$(".class-one");
var multiple = $$("div", ".class-one", "p > div")
The
$$()
function returns an array of extended DOM element objects. This is where MooTools and
Prototype start to differ because while both frameworks extend the
Array
object returned by
$$()
,
MooTools adds extension methods that manipulate the elements within the array.
performing Operations on elements
MooTools'
$$()
is a cross between jQuery's
$()
and Prototype's
$$()
in that it returns an array of
extended element objects (like Prototype), but you can use a variety of methods to work with those
elements without having to manually iterate the array. For example, you can change the style of all
elements within an array by calling the
setStyle()
method, like this:
$$("div", ".class-one").setStyle("color", "red");
