MooTools - Using Arrays

MooTools is a pghtweight JavaScript pbrary which helps to create dynamic web pages. While managing DOM element, we need to select all DOM elements of a web page. This collection can be handled using arrays.

This chapter explains about how to use arrays to manage DOM elements.

each() method

This is the basic method to deal with arrays. It iterates all the elements through a pst. You can use this method based on the requirement. For example, if you want to select all the span elements of a page, follow the script given below. Take a look at the following html page which contains multiple spans.

<span>One</span>
<span>Two</span>

You can use the following script to select each inspanidual span from a collection of spans on the page. The script will select each span and pass an alert. Take a look at the following script.

Script

$$( span ).each(function() {
   alert( a span );
});

You can use the following syntax to handle the above given example. Take a look at the HTML page.

Script

<span id = "body_span">
   <span>One</span>
   <span>Two</span>
</span>

Here, the two spans are enclosed with another span — body_span. While designing a script, we have to select only one external span. Later, by using getElements() method, we can select the two internal spans. Take a look at the following script.

Script

$( body_wrap ).getElements( span ).each(function() {
   alert( a span );
});

You can use a different method to write the above script as follows. Here, we are using a separate variable to select the body_span.

Script

var myArray = $( body_span ).getElements( span );
myArray.each(function() {
   alert( a span );
});

Select Specific Elements from an Array

While manipulating an array of elements, we can select a specific element from an array of elements. The following are some important methods used to manipulate the DOM elements −

getLast()

This method returns the last element of an array. Let us set up an array to understand this method.

var myArray = $( body_span ).getElements( span );

We can now grab the last element within the array.

var lastElement = myArray.getLast();

The variable lastElement now represents the last element within myArray.

getRandom()

getRandom() method works the similar way pke the getLast() method, but will get a random element from array.

Syntax

var randomElement = myArray.getRandom();

The variable randomElement now represents a randomly chosen element within myArray.

Copy of an Array

MooTools provides a way to copy an array using the $A() function. The following is the syntax for the $A() function.

Syntax

var <variable-name> = $A ( <array-variable>);

Add an Element to an Array

There are two different methods for adding elements into an array. The first method lets you add elements one by one or you can merge two different arrays into one.

include()

include() method is used to add an item into an array of DOM elements. For example, consider the following HTML code which contains two span elements and one span element under a single and enclosed span — body_span.

Syntax

<span id = "body_span">
   <span>one</span>
   <span>two</span>
   <span id = "add_to_array">add to array</span>
</span>

In the above code, if we call getElements( span ) method on the body_span element, we get one and two span but the span element is not included into the array. If you want to add it into the array you call include() method on the array variable. Take a look at the following script.

Script

//creating array variable by selecting span elements
var myArray = $( body_wrap ).getElements( span );

//first add your element to a var
var newToArray = $( add_to_array );

//then include the var in the array
myArray.include(newToArray);

Now, the myArray contains both spans and span element.

combine()

This method is used to combine the elements of one array with the elements of another array. This also takes care of duppcate content. For example, consider the following HTML code which contains two span elements and two span elements under single and enclosed span — body_span.

Syntax

<span id = "body_span">
   <span>one</span>
   <span>two</span>
   <span class = "class_name">add to array</span>
   <span class = "class_name">add to array, also</span>
   <span class = "class_name">add to array, too</span>
</span>

In the above code, call getElements( span ) method on the body_span element. You get one and two span. Call $$( .class_name ) method selects the two span elements. You now have one array of span elements and another array of span elements. If you want to merge these two arrays, then you can use the combine method(). Take a look at the following script.

Script

//create your array just pke we did before
var myArray= $( body_wrap ).getElements( span );

//then create an array from all elements with .class_name
var newArrayToArray = $$( .class_name );

//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );

Now, the myArray contains all the elements of newArrayToArray variable.

Example

This will help you understand arrays in MooTools. Suppose, we apply the background color to the array of element which contains spans and span. Take a look at the following code. Here, the second array of elements does not belong to any id or class group and that is why it does not reflect any background color. Take a look at the following code.

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent( domready , function() {
            var myArray = $( body_wrap ).getElements( .class_name );
            var addSpan = $( addtoarray );
            var addMany = $$( .addMany );
            
            myArray.include(addSpan);
            myArray.combine(addMany);
            
            var myArrayFunction = function(item) {
               item.setStyle( background-color ,  #F7DC6F );
            }
            
            myArray.each(myArrayFunction);
         });
      </script>
   </head>
   
   <body>
      <span id = "body_wrap">
         <span class = "class_name">one</span>
         <span>two</span>
         <span class = "class_name">three</span>
         <span id = "addtoarray">add to array</span>
         <br /><span class = "addMany">one of many</span>
         <br /><span class = "addMany">two of many</span>
      </span>
   </body>
   
</html>

You will receive the following output −

Output