MooTools - Selectors

Selectors are used to select HTML elements. Whenever you want to make interactive web pages, you need to select some data or an action from that web page. Selectors help us receive data through HTML request from elements.

Basic Selector($)

The $ is the basic selector in MooTools. Using this, you can select DOM element by its ID. For example, suppose you have an HTML element (such as div) named body_id.

<div id = "body_id">

</div>

If you want to select this div, use the following syntax −

Syntax

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

getElement( )

getElement() is a method which extends basic selector ($). It allows you to refine your selection using element ID. getElement() only selects the single element and will return the first if there are multiple options. You can also use Class name to get the first occurrence of an element. But it will not get array of elements.

Multiple Selector ($$)

The $$ is used to select multiple elements and place those multiple elements into an array. From that array we can manipulate, retrieve, and reorder the list in different ways. Take a look at the following syntax. It defines how to select all div elements from a collection of HTML elements on a webpage.

Syntax

<div>
   <div>a div</div>
   <span id = "id_name">a span</span>
</div>

If you want to select all divs, use the following syntax −

Syntax

//all divs in the page
$$('div');

If you want to select multiple divs with the same id name, use the following syntax −

Syntax

//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');

getElements()

getElements() method is similar to getElement() method. This method returns all elements according to the criteria. You can use either element name (a, div, input) to select those collections or a particular element class name for selecting collection of elements of the same class.

Include and exclude results with operators

MooTools supports different operators used to refine your selections. You can use all these operators in getElements() method. Each of these operators can be used to select an input element by name.

Take a look at the following table. It defines the different operators that MooTools supports.

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

Selectors based on element order

MooTools selectors follow a particular order in element selection. The selectors mainly follow two orders; one is even and the other is odd.

Note − This selector starts at 0, so the first element is even.

Even order

In this order, the selector selects the elements which are placed in an even order. Use the following syntax to select all even divs in your HTML page.

Syntax

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

Odd order

In this order, the selector selects the element placed in an odd order. Use the following syntax to select all odd divs in your HTML page.

Syntax

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

Example

The following example shows how a selector works. Suppose, there is a textbox and a list of technologies on a webpage. If you pick one technology from the list by entering that name into the textbox, then the list shows the filtered results based on your input. This is possible using the MooTools selector. Using selector, we can add an event to the textbox. The event listener will pick the data from the textbox and check it from the list. If it is there in the list, then the list shows the filtered results. Take a look at the following code.

<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>

You will receive the following output −

Output

Advertisements