MooTools是一个轻量级的JavaScript库，可帮助创建动态网页。在管理DOM元素时，我们需要选择网页的所有DOM元素。可以使用数组处理此集合。

本章介绍如何使用数组来管理DOM元素。

each（）方法

这是处理数组的基本方法。它遍历列表中的所有元素。您可以根据需要使用此方法。例如，如果要选择页面的所有div元素，请遵循以下脚本。看看下面的HTML页面，其中包含多个div。

One
Two

您可以使用以下脚本从页面上的div集合中选择每个单独的div 。该脚本将选择每个div并传递警报。看一下下面的脚本。

脚本

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

您可以使用以下语法来处理上面给出的示例。看一下HTML页面。

脚本

   
One
   
Two

在这里，两个div包含另一个div — body_div 。设计脚本时，我们只需要选择一个外部div。稍后，通过使用getElements（）方法，我们可以选择两个内部div。看一下下面的脚本。

脚本

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

您可以使用另一种方法来编写上述脚本，如下所示。在这里，我们使用一个单独的变量来选择body_div 。

脚本

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

从数组中选择特定元素

在操作元素数组时，我们可以从元素数组中选择特定元素。以下是用于操作DOM元素的一些重要方法-

getLast（）

此方法返回数组的最后一个元素。让我们建立一个数组来了解这种方法。

var myArray = $('body_div').getElements('div');

现在，我们可以获取数组中的最后一个元素。

var lastElement = myArray.getLast();

变量lastElement现在表示myArray中的最后一个元素。

getRandom（）

getRandom（）方法的工作方式与getLast（）方法类似，但是将从数组中获取随机元素。

句法

var randomElement = myArray.getRandom();

现在，变量randomElement表示myArray中随机选择的元素。

数组的副本

MooTools提供了一种使用＆dollar; A（）函数复制数组的方法。以下是＆dollar; A（）函数的语法。

句法

var  = $A ( );

将元素添加到数组

有两种方法可以将元素添加到数组中。第一种方法使您可以一个一个地添加元素，也可以将两个不同的数组合并为一个。

包括（）

include（）方法用于将项目添加到DOM元素数组中。例如，考虑以下HTML代码，该代码在单个且封闭的div — body_div下包含两个div元素和一个span元素。

句法

   
one
   
two
   add to array

在上面的代码中，如果我们在body_div元素上调用getElements（’div’）方法，则会得到一个和两个div，但是span元素不包含在数组中。如果要将其添加到数组中，请在数组变量上调用include（）方法。看一下下面的脚本。

脚本

//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);

现在，myArray同时包含div和span元素。

结合（）

此方法用于将一个数组的元素与另一数组的元素组合。这也可以处理重复的内容。例如，考虑以下HTML代码，该代码在单个和封闭的div — body_div下包含两个div元素和两个span元素。

句法

   
one
   
two
   add to array
   add to array, also
   add to array, too

在上面的代码中，对body_div元素调用getElements（’div’）方法。你得到一和二分度。调用＆dollar;＆dollar;（’。class_name’）方法选择两个span元素。现在，您有一个div元素数组和另一个span元素数组。如果要合并这两个数组，则可以使用Combine方法（）。看一下下面的脚本。

脚本

//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 );

现在，myArray包含newArrayToArray变量的所有元素。

例

这将帮助您了解MooTools中的数组。假设我们将背景色应用于包含div和span的元素数组。看一下下面的代码。在这里，第二个元素数组不属于任何id或class组，这就是为什么它不反映任何背景色的原因。看一下下面的代码。

      
      
      
   
   
   
      

         
one
         
two
         
three
         add to array
         
one of many
         
two of many
      
   
   

您将收到以下输出-

输出