MooTools Using Arrays - MooTools

How to use MooTools Array?

MooTools is a lightweight JavaScript library which enables to create dynamic web pages. While managing DOM detail, we need to select all DOM elements of an internet web page. This collection may be handled using arrays.

This chapter explains approximately a way to use arrays to manage DOM elements.

each () method

This is the simple approach to address arrays. It iterates all the factors via a listing. You could use this method primarily based at the requirement. As an instance, in case you want to select all of the div factors of a web page, observe the script given underneath. Take a look at the following HTML page which incorporates multiple divs.

You could use the subsequent script to select each individual div from a collection of divs at the web page. The script will select each div and bypass an alert. Take a look at the subsequent script.

Script

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

Script

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

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

Select specific elements from an Array

Whilst manipulating an array of elements, we will pick a particular detail from an array of elements. the following are a few 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 recognize this method.

We can now grab the last element within the array.

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


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

Add an element to an Array

There are two different methods for adding elements into an array. the first technique 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 div elements and one span element under a single and enclosed div — body_div.

Syntax

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 in 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

Now, the myArray contains both divs and span element.

Combine ()

This technique is used to combine the elements of one array with the elements of another array. This also takes care of the duplicate content. For example, consider the following HTML code which incorporates div elements and two span elements below single and enclosed div — body_div.

Syntax

In the above code, call getElements('div') method on the body_div element. You get one and div. call $$('.class_name') the method selects the two span elements. You now have one array of div factors and another array of spam factors. If you want to merge those two arrays, then you can use the combined method (). Take a look at the following script.

Script

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

Instance

This will help you understand arrays in MooTools. Suppose, we apply the background color to the array of detail which includes divs and span. Check the subsequent code. Here, the second array of elements does no longer belong to any identification or class group and this is why it does not reflect any background color. Take a look at the following code.

You will receive the following output −

Output
MooTools Arrays

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

MooTools Topics