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.
Syntax
Syntax
Script
Syntax
Script
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.
Output
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
No comments:
Post a Comment