MooTools - Using Arrays

MooTools is a lightweight JavaScript library 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 list. You can use this method based on the requirement. For example, if you want to select all the div elements of a page, follow the script given below. Take a look at the following html page which contains multiple divs.

<div>One</div>
<div>Two</div>

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

Script

$$('div').each(function() {
   alert('a div');
});

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

Script

<div id = "body_div">
   <div>One</div>
   <div>Two</div>
</div>

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

Script

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

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

Script

var myArray = $('body_div').getElements('div');
myArray.each(function() {
   alert('a div');
});

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_div').getElements('div');

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 like 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 div elements and one span element under a single and enclosed div — body_div.

Syntax

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

In the above code, if we call getElements('div') method on the body_div element, we get one and two div 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 div elements
var myArray = $('body_wrap').getElements('div');

//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 divs 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 duplicate content. For example, consider the following HTML code which contains two div elements and two span elements under single and enclosed div — body_div.

Syntax

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <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>
</div>

In the above code, call getElements('div') method on the body_div element. You get one and two div. Call $$('.class_name') method selects the two span elements. You now have one array of div 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 like we did before
var myArray= $('body_wrap').getElements('div');

//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 divs 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>
      <div id = "body_wrap">
         <div class = "class_name">one</div>
         <div>two</div>
         <div class = "class_name">three</div>
         <span id = "addtoarray">add to array</span>
         <br /><span class = "addMany">one of many</span>
         <br /><span class = "addMany">two of many</span>
      </div>
   </body>
   
</html>

You will receive the following output −

Output

Advertisements