Mootools 1.2 tutorial (2) DOM Selector

Document directory

• Learn more ......

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.
Reference code: Copy codeThe Code is as follows: // select the element with ID "body_wrap"
$ ('Body _ wrap ');

Reference code:Copy codeThe Code is as follows: <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.
Reference code:Copy codeThe Code is as follows: // 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 ');

Reference code:Copy codeThe Code is as follows: <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 tag names (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.
Reference code:Copy codeThe Code is as follows: // select all the divs on this page
$ ('Div ');
// Select the id_name element and all div
$ ('# Id_name', 'div ');

Reference code:Copy codeThe Code is as follows: <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 ();.
Reference code:Copy codeThe Code is as follows: // select all links under the element with the ID "body_wrap"
$ ('Body _ wrap '). getElements ('A ');
// Select the child element whose ID is "body_wrap" and whose CSS class name is "special_anchor_class"
$ ('Body _ wrap '). getElements ('. special_anchor_class ');

Reference code:Copy codeThe Code is as follows: <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
Reference code:
// Select the input element whose name is "phone_number"
$ ('Body _ wrap '). getElements ('input [name = phone_number]');
^ =: ...... Start
Reference code:
// Select the input element whose name starts with "phone"
$ ('Body _ wrap '). getElements ('input [name ^ = phone]');
$ =: ...... End
Reference code:
// Select the input element whose name ends with a number
$ ('Body _ wrap '). getElements ('input [name $ = number]');
! =: Not equal
Reference code:
// Select the input element whose name is not equal to "address"
$ ('Body _ wrap '). getElements ('input [name! = Address] ');
Reference code:
<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 just 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.
Reference code:
// Select the div whose serial number is an even number
$ ('Div: even ');
Reference code:
<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.
Reference code:
// Select all div with an odd number
$ ('Div: odd ');
Reference code:
<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 ).
Reference code:
// Select the parent element of the element whose ID is "child_id"
$ ('Child _ id'). getParent ();
Reference code:
<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.
Reference code:
// 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 ');
Reference code:Copy codeThe Code is as follows: <div id = "body_wrap">
<Span> Even </span>
<Span class = "middle_spans"> Odd </span>
<Span class = "middle_spans"> Even </span>
<Span> Odd </span>
</Div>

Download the zip package and try again
This zip package contains a simple html file, the core library of MooTools 1.2, an external js file, and the example above.
Learn more ......

This does not mean that this is a list of all functions of the MooTools 1.2 selector. It just helps you get started and shows you what functions MooTools provides. To learn more about selector, refer to the following documents:

• There are a lot of documents about Element selectors.
• By the way, let's take a look at Selectors)

$ Selector articles on MooTools Blog

This is a good post on mootools.net about $ selector and its varied blog. With this selector, you can do things that you cannot believe. This article is worth reading.

Slickspeed Selector

Here we have an experiment on MooTools to measure how quickly different libraries choose elements. This is cool for itself, but examples of these selectors are very valuable. All selector features can be implemented through the $ method.

W3C Selector

MooTools also allows you to leverage the power of pseudo selector (as demonstrated by Slickspeed above ). Here is a W3C article about selector. It must be worth reading (if only the selector list is useful to you ). I'm not sure whether the $ selector of MooTools supports every single selector on this page, but at least the vast majority. Let me know more about this.