30 days to learn how to teach MooTools (2): DOM Selector

If you are not ready, read the previous article "Mootools 1.2 tutorial (1) -- Introduction to MooTools". We talked about how to reference MooTools 1.2 and how to call your script in domready.

Today, we will start the 2nd lecture in this series of tutorials. In this lecture, we will learn several methods to select HTML elements. In many ways, this is the most basic use of MooTools. After all, to create an interactive user experience based on HTML elements, you must first put them in your hands.

 
Basic Method

$ ();

$ Function is the basic selector in MooTools. You can use it to select DOM elements based on an ID.

// Select the element with the ID "body_wrap"
$ ('Body _ wrap ');

<Div id = "body_wrap">
</Div>

 

. GetElement ();

. GetElement (); extends the $ method to simplify your selection. For example, you can use the $ method to select the "body_wrap" element and select the first subnode .. GetElement (); select only one element. If multiple elements meet the requirements, the first element is returned. If you give the. getElement (); method a CSS class name as the parameter, you will get the first element with the CSS class name, instead of the array of all the elements of the function. To select multiple elements, you can use the following. getElements (); method.

// Select the first link under the element with the ID "body_wrap"
$ ('Body _ wrap '). getElement ('A ');

// Select the element whose ID is body_wrap and whose ID is special_anchor.
$ ('Body _ wrap '). getElement (' # special_anchor ');

// Select the element whose ID is "body_wrap" and whose first CSS class is "special_anchor_class"
$ ('Body _ wrap '). getElement ('. special_anchor_class ');


<Div id = "body_wrap">
<A href = "#"> anchor </a>
<A href = "#"> another anchor </a>
<A id = "special_anchor" href = "#"> special anchor </a>
<A class = "special_anchor_class" href = "#"> special anchor </a>
<A class = "special_anchor_class" href = "#"> another special anchor </a>
</Div>

$ ();

$ Functions allow you to quickly select multiple elements and form an array (a list that you can operate, retrieve, and reorder in any way ). You can select multiple elements by using the cursor name (such as div, a, img, etc.), ID, or their combinations. As a reader pointed out, you can use $ to do many things, far beyond what we have described here.

// Select all the divs on this page
$ ('Div ');

// Select the id_name element and all div
$ ('# Id_name', 'div ');

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

. GetElements ();

. GetElements (); is very similar to. getElement (); but it returns all the elements that meet the requirements and forms an array. You can use. getElements (); As the. getElement (); method ();.

// Select all links under the element with the ID "body_wrap"
$ ('Body _ wrap '). getElements ('A ');

// Select the child element of the CSS class named "special_anchor_class" under the element whose ID is "body_wrap ".
$ ('Body _ wrap '). getElements ('. special_anchor_class ');


<Div id = "body_wrap">
<A href = "#"> anchor </a>
<A href = "#"> another anchor </a>
<A class = "special_anchor_class" href = "#"> special anchor </a>
<A class = "special_anchor_class" href = "#"> another special anchor </a>
</Div>

Use operators to include and exclude results

Operator

MooTools 1.2 supports several operators, allowing you to further streamline your selection operations. You can use these operators in. getElements (); to include or exclude specific results. MooTools supports four operators, each of which can be used to select an input element by name.
=: Equal

// Select the input element whose name is "phone_number ".
$ ('Body _ wrap '). getElements ('input [name = phone_number]');


// Select the input element whose name starts with "phone"
$ ('Body _ wrap '). getElements ('input [name ^ = phone]');

 

$ =: ...... End

// Select the input element whose name ends with a number
$ ('Body _ wrap '). getElements ('input [name $ = number]');

 

! =: Not equal

// Select the input element whose name is not equal to "address"
$ ('Body _ wrap '). getElements ('input [name! = Address] ');


<Div id = "body_wrap">
<Input name = "address" type = "text"/>
<Input name = "phone_number" type = "text"/> <! -- All the sample code above will select this element -->
</Div>

 

(Fdream Note: input is only used as an example here. You can also use this method to select other elements, such as div and .)

To use an operator, you must first specify the element type (such as input here), then specify the attribute you want to filter (such as the name here), and add your operator, finally, select your filter string.

Element sequence-based Selector

Even (select an even number)

With this simple selector, you can select an element with an even number. Note: This selector starts counting from 0, so the first element is in an even order.

// Select the div whose serial number is an even number
$ ('Div: even ');


<Div> Even </div> <! -- The above Code selects this element -->
<Div> Odd </div>
<Div> Even </div> <! -- The above Code selects this element -->
<Div> Odd </div>

 

Odd)

Like even, it only selects an element with an odd number.

// Select all div with an odd number
$ ('Div: odd ');



<Div> Even </div>
<Div> Odd </div> <! -- The above Code selects this element -->
<Div> Even </div>

<Div> Odd </div> <! -- The above Code selects this element -->

 

. GetParent ();

By using the. getParent (); method, you can obtain the parent element (parent) of an element ).

// Select the parent element of the element whose ID is child_id.
$ ('Child _ id'). getParent ();



<Div id = "parent_id"> <! -- The above script will return this element -->
<Div id = "child_id"> Even </div>
</Div>

 

Code example

Any MooTools UI development starts with selector. Here are some very simple examples to demonstrate how to use a selector to operate DOM elements.

// Set the background color of all spans to # eee
$ ('Span '). setStyle ('background-color',' # eee ');
// Set the background color of all span with an odd number to # eee
$ ('Span: odd'). setStyle ('background-color', '# eee ');

// Set the background color of all the CSS classes named. middle_spans under the element whose ID is body_wrap to # eee
$ ('Body _ wrap '). getElements ('. middle_spans '). setStyle ('background-color',' # eee ');



<Div id = "body_wrap">
<Span> Even </span>
<Span class = "middle_spans"> Odd </span>
<Span class = "middle_spans"> Even </span>
<Span> Odd </span>
</Div>