MooTools-セレクター
セレクターは、HTML要素を選択するために使用されます。インタラクティブなWebページを作成する場合は常に、そのWebページからデータまたはアクションを選択する必要があります。セレクターは、要素からのHTMLリクエストを介してデータを受信するのに役立ちます。
ベーシックセレクター（$）
ザ・ $MooToolsの基本的なセレクターです。これを使用して、IDでDOM要素を選択できます。たとえば、次の名前のHTML要素（divなど）があるとします。body_id。
<div id = "body_id">
</div>このdivを選択する場合は、次の構文を使用します-
構文
//selects the element with the ID 'body_id'
$('body_id');getElement（）
getElement（）は、基本セレクター（$）を拡張するメソッドです。要素IDを使用して選択を絞り込むことができます。getElement（）は単一の要素のみを選択し、複数のオプションがある場合は最初の要素を返します。クラス名を使用して、要素の最初の出現を取得することもできます。ただし、要素の配列は取得されません。
マルチセレクター（$$）
$$は、複数の要素を選択し、それらの複数の要素を配列に配置するために使用されます。その配列から、さまざまな方法でリストを操作、取得、および並べ替えることができます。次の構文を見てください。Webページ上のHTML要素のコレクションからすべてのdiv要素を選択する方法を定義します。
構文
<div>
<div>a div</div>
<span id = "id_name">a span</span>
</div>すべてのdivを選択する場合は、次の構文を使用します-
構文
//all divs in the page
$$('div');同じID名を持つ複数のdivを選択する場合は、次の構文を使用します-
構文
//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');getElements（）
getElements（）メソッドはgetElement（）メソッドに似ています。このメソッドは、基準に従ってすべての要素を返します。どちらでも使用できますelement name (a, div, input) それらのコレクションまたは特定の要素を選択するには class name 同じクラスの要素のコレクションを選択するため。
演算子を使用して結果を含めたり除外したりする
MooToolsは、選択を絞り込むために使用されるさまざまな演算子をサポートしています。これらの演算子はすべてgetElements（）メソッドで使用できます。これらの各演算子を使用して、入力要素を名前で選択できます。
次の表をご覧ください。MooToolsがサポートするさまざまな演算子を定義します。
| オペレーター | 説明 | 例 |
|---|---|---|
| =（等しい） | 名前で入力要素を選択します。 | $（ 'body_wrap'）。getElements（ 'input [name = phone_number]'）; |
| ^ =（で始まる） | 名前の開始文字を比較して、入力要素を選択します。 | $（ 'body_wrap'）。getElements（ 'input [name ^ = phone]'）; |
| $ =（で終わる） | 名前の終了文字を比較して、入力要素を選択します。 | $（ 'body_wrap'）。getElements（ 'input [name $ = number]'）; |
| ！=（等しくない） | 名前で入力要素の選択を解除します。 | $（ 'body_wrap'）。getElements（ 'input [name！= address]'）; |
| * =（含む） | 特定の文字パターンを含む入力要素を選択します。 | $（ 'body_wrap'）。getElements（ 'input [name * = phone]'）; |
要素の順序に基づくセレクター
MooToolsセレクターは要素選択の特定の順序に従います。セレクターは主に2つの順序に従います。1つは偶数で、もう1つは奇数です。
Note −このセレクターは0から始まるため、最初の要素は偶数です。
注文さえ
この順序で、セレクターは偶数の順序で配置されている要素を選択します。次の構文を使用して、HTMLページ内のすべての偶数divを選択します。
Syntax
// selects all even divs
$$('div:even');奇数順
この順序で、セレクターは奇数の順序で配置された要素を選択します。次の構文を使用して、HTMLページ内のすべての奇数divを選択します。
Syntax
// selects all odd divs
$$('div:odd');Example
次の例は、セレクターがどのように機能するかを示しています。Webページにテキストボックスとテクノロジのリストがあるとします。テキストボックスにその名前を入力してリストから1つのテクノロジーを選択すると、入力に基づいてフィルター処理された結果がリストに表示されます。これはMooToolsセレクターを使用して可能です。セレクターを使用して、テキストボックスにイベントを追加できます。イベントリスナーはテキストボックスからデータを選択し、リストからチェックします。リストにある場合、リストにはフィルタリングされた結果が表示されます。次のコードを見てください。
<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 input = $('filter');
// set the title attribute of every element
// to it's text in lowercase
$$('ul > li').each(function(item){
item.set('title', item.get('text').toLowerCase());
});
// the function we'll call when the user types
var filterList = function(){
var value = input.value.toLowerCase();
$$('li').setStyle('display','none');
// check the title attribute if it contains whatever the user is typing
$$('ul > li[title*=' + value + ']').setStyle('display','');
};
// make it happen
input.addEvent('keyup', filterList);
});
</script>
</head>
<body>
<p><input id = "filter" type = "text" /></p>
<ul>
<li>C</li>
<li>Cpp</li>
<li>Java</li>
<li>JavaScript</li>
<li>Hadoop</li>
<li>Hive</li>
<li>CouchDB</li>
</ul>
</body>
</html>次の出力が表示されます-
Output