少しDOMの基本を学んでいました！

随分前回から日が開いてしましたがMooToolsマスターへの道3日目です。

元記事は30 Days of Mootools 1.2 Tutorials - Day 3 - Intro to Using Arraysです。

今回は配列について学んでいくようです。
難しそうですけど頑張ります！

MooTools1.2で配列を使用する

まだMooToolsを30日でマスターするチュートリアルを試す！【2日目】を見ていない方はこっちを先にご覧ください。
前回はSelectorsについての説明でした。

今回はDOM要素を操作するためにどのように配列を使用するかを見ていきます。

基本

.each();

.each();は配列を使う際に使用します。
それは配列の要素を通して、必要なスクリプト論理を繰り返す簡単な方法を提供します。
例えば、以下の様にするとページ内の全てのdiv要素に対してalertを呼び出します。

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

この記述を下のHTMLに適用すると、それぞれのdivに対して一つ、計二つのalertが表示されます。

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

.each();は必ずしも$$と合わせて使う必要はありません。
他の方法で配列を作成するには.getElements();があります。（2日目参照）

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

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

それから同じ処理を成し遂げる別の方法として、配列を変数に格納して.each();を使用する方法があります。

//まず変数を "var 変数名"と宣言します。
//次に「=」を使用して変数に値を代入します。
//今回はdiv要素の配列となります。
var myArray = $('body_wrap').getElements('div');
 
//配列が格納された変数をSelectorsの様に使用する事が出来ます。
myArray.each(function() {
    alert('a div');
});

最終的にあたなはセレクタと.each();をfunctionから切り離したいでしょう。
明日のチュートリアルでより深く学んでいきますが、当分の間、以下の様に単純な形で作成していきます。

var myArray = $('body_wrap').getElements('div');
 
//先ほどの様に新しいfunctionを作成する為に変数を宣言します。
//「=」の後ろにfunction()を記述します。
//最後に { ここ };にfunctionのコードを記述して行きます。
var myFunction = function() {
    alert('a div');
};
 
//そして.each();の中でfunctionを呼んであげます。
myArray.each(myFunction);
※functionの名前を""や''で括ってあげる必要はありません。

配列のコピーを作成する

$A

MooToolsでは容易に配列をコピーする$A functionを提供しています。

//配列を格納した変数を作成します。
var myArray = $('body_wrap').getElements('div');

//新しくmyCopyという変数を作成し、myArrayを割り当てます。

var myCopy = $A(myArray);

これでmyArrayがmyCopyにコピーされます。

配列の中の特定の要素に関して

.getLast();

.getLast();は配列の最後の要素を取り出します。

var myArray = $('body_wrap').getElements('div');//配列を作成
var lastElement = myArray.getLast();//配列の最後の要素を変数に格納
//以下確認の為に記述
lastElement.setStyle('background-color','#FFF000');//最後の要素の背景色が変わればOK

.getRandom();

.getRandom();は配列の要素をランダムに取り出します。

var randomElement = myArray.getRandom();
//以下確認の為に記述
randomElement.setStyle('background-color','#FFF000');//最後の要素の背景色が変わればOK

配列に要素を追加する

.include();

.include();を使用するとアイテムを配列に追加する事が出来ます。
.include()の中には単に要素セレクタを記述します。

以下の様なHTMLがあった場合

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

//ID'body_wrap'の子要素のdivを変数に格納
var myArray = $('body_wrap').getElements('div');

そして、配列に追加したい要素を変数に格納して.include();を使用します。

//追加したい要素を変数に格納
var newToArray = $('add_to_array');
 
//includeを使用して配列に追加
myArray.include(newToArray);

これでmyArrayには最後のspan要素が追加されています。

.combine();

.combine();は配列に配列を追加します。

以下の様なHTMLをもとに見ていきます。

<div id="body_wrap">
    <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>

まずは二つの配列を構築します。

//まずは今まで通りdivの配列
var myArray= $('body_wrap').getElements('div');
 
//class_nameというクラス名をもつ要素の配列
var newArrayToArray = $$('.class_name');

ここで.combine();を使用します。
二つの配列の重複に対処する必要はありません。

//myArrayにnewArrayToArrayを追加
myArray.combine(newArrayToArray );

これでmyArrayはnewArraytoArrayのすべての要素を含みます。

3日目の感想

今回は配列についてのお話でした。
ここら辺がこれからの基礎になっていくのでは無いでしょうか。
Scriptっぽくて楽しいです。

次回は「Functions and Mootools 1.2」と題されていますね。
段々小難しくなってきましたが、DOMの方の勉強もしつつ頑張ります。