MooTools-配列の使用
MooToolsは、動的なWebページの作成に役立つ軽量のJavaScriptライブラリです。DOM要素を管理する際に、WebページのすべてのDOM要素を選択する必要があります。このコレクションは、配列を使用して処理できます。
この章では、配列を使用してDOM要素を管理する方法について説明します。
each（）メソッド
これは、配列を処理するための基本的な方法です。リストを介してすべての要素を繰り返します。要件に基づいてこの方法を使用できます。たとえば、ページのすべてのdiv要素を選択する場合は、以下のスクリプトに従います。複数のdivを含む次のhtmlページを見てください。
<div>One</div>
<div>Two</div>次のスクリプトを使用して、 each individual divページ上のdivのコレクションから。スクリプトは各divを選択し、アラートを渡します。次のスクリプトを見てください。
脚本
$$('div').each(function() {
alert('a div');
});次の構文を使用して、上記の例を処理できます。HTMLページを見てください。
脚本
<div id = "body_div">
<div>One</div>
<div>Two</div>
</div>ここでは、2つのdivが別のdivで囲まれています— body_div。スクリプトを設計する際に、外部divを1つだけ選択する必要があります。後で、getElements（）メソッドを使用して、2つの内部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（）メソッドと同様に機能しますが、配列からランダムな要素を取得します。
Syntax
var randomElement = myArray.getRandom();変数 randomElement 内でランダムに選択された要素を表すようになりました myArray。
配列のコピー
MooToolsは、$ A（）関数を使用して配列をコピーする方法を提供します。以下は、$ A（）関数の構文です。
構文
var <variable-name> = $A ( <array-variable>);配列に要素を追加する
配列に要素を追加するには、2つの異なる方法があります。最初の方法では、要素を1つずつ追加するか、2つの異なる配列を1つにマージすることができます。
include（）
include（）メソッドは、DOM要素の配列にアイテムを追加するために使用されます。たとえば、1つの囲まれたdivの下に2つのdiv要素と1つのspan要素を含む次のHTMLコードについて考えてみます。body_div。
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span id = "add_to_array">add to array</span>
</div>上記のコードで、でgetElements（ 'div'）メソッドを呼び出すと body_div要素の場合、1つと2つのdivを取得しますが、span要素は配列に含まれていません。呼び出す配列に追加する場合include()配列変数のメソッド。次のスクリプトを見てください。
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);これで、myArrayにはdivとspan要素の両方が含まれます。
コンバイン（）
このメソッドは、ある配列の要素を別の配列の要素と組み合わせるために使用されます。これにより、重複するコンテンツも処理されます。たとえば、単一の囲まれたdivの下に2つのdiv要素と2つのspan要素を含む次のHTMLコードについて考えてみます。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>上記のコードでは、でgetElements（ 'div'）メソッドを呼び出します。 body_div素子。あなたは1つと2つのdivを取得します。$$（ '。class_name'）メソッドを呼び出すと、2つのスパン要素が選択されます。これで、div要素の1つの配列とspan要素の別の配列ができました。これらの2つの配列をマージする場合は、combine method（）を使用できます。次のスクリプトを見てください。
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 );これで、myArrayにはnewArrayToArray変数のすべての要素が含まれます。
Example
これは、MooToolsの配列を理解するのに役立ちます。divとspanを含む要素の配列に背景色を適用するとします。次のコードを見てください。ここで、要素の2番目の配列は、IDまたはクラスグループに属していないため、背景色を反映していません。次のコードを見てください。
<!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>次の出力が表示されます-
Output