«MooToolsを30日でマスターするチュートリアルを試す！【1日目】｜ メイン ｜【小ネタ】簡単にDOM操作後のソースを確認する方法»
2008年10月10日
MooToolsを30日でマスターするチュートリアルを試す！【2日目】
MooToolsマスターへの道2日目です。
1日目は以下のリンクからどうぞ↓
MooToolsを30日でマスターするチュートリアルを試す！【1日目】
それでは2日目頑張ります。
例によって英語に苦戦しています＞＜
Mootools 1.2 Selectors
このチュートリアルでは、 HTMLの要素を選択するいくつかの方法を学んでいきます。
様々な意味で、Mootoolsを一般的に使用する基礎となります。
結局、HTML要素から対話的なユーザー・エクスペリエンスを作成するためには、まずそれらを手に入れなければなりません。
Selectorsの基礎
$();
$ functionはMooToolsの最も基本的なセレクタです。
これを使用する事でDOM要素のIDを取得できます。
//ID'body_wrap'を取得します
$('body_wrap');
<div id="body_wrap"> </div>
Webページの内容(文章、画像など)およびそれらの配置、スタイルをオブジェクトとして扱い、スクリプト言語を使って制御するための取り決め。ここではHTML要素的なニュアンスですね。
参考：DOMとは 【Document Object Model】 - IT用語辞典
.getElement();
.getElement();は$ functionを拡張します。
例えば$ functionでID'body_wrap'を取得し、.getElement();で最初の子要素を取得できます。
ただし一つの要素を選択するだけであり、複数ある場合は一番目を返します。
.getElement();でクラス名を指定した場合、最初の一致するクラス要素を取得します。
複数の要素を選択するには、以下の.getElements();を見てください。
//ID'body_wrap'の中の最初の子要素を取得します。
$('body_wrap').getElement('a');
//ID'body_wrap'の中のID'special_anchor'を取得します。
$('body_wrap').getElement('#special_anchor');
//ID'body_wrap'の中のclass'special_anchor_class'を取得します。
$('body_wrap').getElement('.special_anchor_class');
<div id="body_wrap"> <a href="#">最初のa要素</a> <a href="#">2回目のa要素</a> <a id="special_anchor" href="#">ID-special_anchor</a> <a class="special_anchor_class" href="#">クラス-special anchor</a> <a class="special_anchor_class" href="#">クラス-2回目のspecial anchor</a> </div>
$$();
$$();は複数のエレメントに素早くアクセスし、それらを配列に置く事が出来ます。
エレメントの名前（div, a, img等）やIDを選択出来ます。
//全てのdiv要素を選択
$$('div');
//IDが'id_name'の要素と全てのdiv要素を選択
$$('#id_name', 'div');
<div>ここはdiv要素</div> <span id="id_name">こっちはspanでid="id_name"</span> <span>ただのspan</span>
日本のサイトだと複数のエレメントにアクセスするでしっかり説明されています。
arrayは配列って認識してるんですが、どうなんでしょう。少し意味合いが違うのかも知れません。（現時点では不明）
.getElements();
.getElements();は.getElement();に似ています。基準に合う全ての要素を返し配列に置きます。
.getElements();は.getElement();の様に使用する事が出来ます。
//ID 'body_wrap'全てのa要素を全て選択
$('body_wrap').getElements('a');
//ID'body_wrap'の子要素の中からclass 'special_anchor_class'を全て選択
$('body_wrap').getElements('.special_anchor_class');
<div id="body_wrap"> <a href="#">最初のa要素</a> <a href="#">2回目のa要素</a> <a id="special_anchor" href="#">ID-special_anchor</a> <a class="special_anchor_class" href="#">クラス-special anchor</a> <a class="special_anchor_class" href="#">クラス-2回目のspecial anchor</a> </div>
当たり前ですが、ちゃんと指定出来てます。こんな事で感動。
演算子で結果に含む、除く
Mootools 1.2ではいくつかの結果をより洗練する為の演算子をサポートしています。
.getElements();の中でそれらを使用する事が出来ます。
Mootoolsでは4つの演算子をサポートしていてinputのname属性を選択するのにそれぞれ使用できます。
= : 等しい
//inputのnameが'phone_number'と等しい
$('body_wrap').getElements('input[name=phone_number]');
^= : ～始まる（前方一致）
//inputのnameが'phone'から始まる
$('body_wrap').getElements('input[name^=phone]');
$= : ～で終わる（後方一致）
//inputのnameが'number'で終わる
$('body_wrap').getElements('input[name$=number]');
!= : 等しくない
//inputのnameが'address'では無い
$('body_wrap').getElements('input[name!=address]');
<div id="body_wrap">
<input name="address" type="text" />
<input name="phone_number" type="text" /><!-- ←上の4つの例は全てこちらを選択します -->
</div>
等しいの演算子が「=」なのが注意点でしょうか。
要素の順序を基にしたセレクタ
even
この簡単なセレクタを使用して、規則正しい要素を選んでください。
このセレクタが0から始まるので、最初の要素はevenです。
//全ての偶数のdivを選択
$$('div:even');
odd
evenを除いた全ての奇数の要素
//全ての奇数のdivを選択
$$('div:odd');
これを使うとテープルのセルの色分けとかが簡単に行えます。
.getParent();
親要素を取得する事が出来ます。
//ID 'child_id'の親要素を取得します。
$('child_id').getParent();
<div id="parent_id"> <!-- この要素が選択されます --> <div id="child_id">Even</div> </div>
2日目の感想
2日目は実際にいくつかサンプルを書いてみました！
やっぱり動くと面白い。
難易度が上がってきていますので解釈が間違っている部分があるかも知れません。
何かあった場合はご指摘ください。
ちなみに本屋さんに行ってWebクリエイティブのためのDOM Scripting[to-R]で紹介されている本を見つけたので購入しました。
なかなか楽しく読めています。オススメです。
3日目も2～3日以内にUP出来ればと思っています。
続きリリースしました！
MooToolsを30日でマスターするチュートリアルを試す！【3日目】
Posted by ; k. 2008年10月10日 10:21
このエントリーのタグ
このカテゴリーの最新記事
トラックバック
このエントリーのトラックバックURL：
