MooTools-セレクター

セレクターは、HTML要素を選択するために使用されます。インタラクティブなWebページを作成する場合は、そのWebページから何らかのデータまたはアクションを選択する必要があります。セレクターは、要素からのHTML要求を介してデータを受信するのに役立ちます。

基本セレクター（＆dollar;）

＆dollar; *は、MooToolsの基本的なセレクターです。これを使用して、IDでDOM要素を選択できます。たとえば、 *body_id という名前のHTML要素（divなど）があるとします。

<div id = "body_id">

</div>

このdivを選択したい場合は、次の構文を使用します-

構文

//selects the element with the ID 'body_id'
$('body_id');

getElement（）

getElement（）は、基本セレクター（$）を拡張するメソッドです。要素IDを使用して選択を絞り込むことができます。 getElement（）は単一の要素のみを選択し、複数のオプションがある場合は最初の要素を返します。クラス名を使用して、要素の最初の出現を取得することもできます。しかし、要素の配列は取得しません。

マルチセレクター（＆dollar;＆dollar;）

＆dollar;＆dollar;複数の要素を選択し、それらの複数の要素を配列に配置するために使用されます。その配列から、さまざまな方法でリストを操作、取得、および並べ替えることができます。次の構文を見てください。 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がサポートするさまざまな演算子を定義します。

Operator	Description	Example
= (equal to)	Select input element by its name.	DOLLAR('body_wrap').getElements ('input[name = phone_number]');
^= (starts with)	Select input element by comparing its starting letters of the name.	DOLLAR('body_wrap').getElements ('input[name^=phone]');
DOLLAR= (ends with)	Select the input element by comparing its ending letters of the name.	DOLLAR('body_wrap').getElements ('input[name$ = number]');
!= (is not equal to)	De-select the input element by is name.	DOLLAR('body_wrap').getElements ('input[name!=address]');
*= (Contains)	Select the input element which contains particular letter pattern.	DOLLAR('body_wrap').getElements ('input[name*=phone]');

要素の順序に基づくセレクター

MooToolsセレクターは、要素の選択において特定の順序に従います。セレクターは主に2つの順序に従います。 1つは偶数で、もう1つは奇数です。

注-このセレクターは0から始まるため、最初の要素は偶数です。

偶数注文

この順序で、セレクタは偶数の順序で配置されている要素を選択します。次の構文を使用して、HTMLページ内のすべてのdivを選択します。

構文

//selects all even divs
$$('div:even');

奇数

この順序で、セレクタは奇数の順序で配置された要素を選択します。次の構文を使用して、HTMLページ内のすべての奇数divを選択します。

構文

//selects all odd divs
$$('div:odd');

例

次の例は、セレクターの仕組みを示しています。 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>

次の出力が表示されます-

出力

Mootools-selectors

目次