Mootools 1.2 Tutorial (2) DOM Selector_Mootools

If you are not ready yet, please read the previous article "Mootools 1.2 Tutorial (1) - Introduction to MooTools" first. We talked about how to reference MooTools 1.2 and how to call your scripts in domready.
Today we start the second lecture of this series of tutorials. In this lesson, we'll learn several ways to select HTML elements. In many ways, this is the most used and basic of MooTools. After all, to create an interactive user experience based on HTML elements, you must first have them in your hands.
Basic methods
$();
$ function is the basic selector in MooTools. You can use it to select DOM elements based on an ID.
Reference code:

Copy code The code is as follows:

// Select the ID as " body_wrap" element
$('body_wrap');

Reference code:

Copy code The code is as follows:

.getElement();
. getElement(); extends the $ method, allowing you to simplify your selection operations. For example, you can use the $ method to select the element with the ID "body_wrap" and then select the first child node. .getElement(); Selects only one element. If there are multiple elements that meet the requirements, the first element is returned. If you give the .getElement(); method a CSS class name as a parameter, you will get the first element with that CSS class name, rather than an array of all elements of the function. To select multiple elements, you can use the .getElements(); method below.
Reference code:

Copy code The code is as follows:

// Select the ID as " The first link under the element with the ID "body_wrap"
$('body_wrap').getElement('a');
// Select the element with the ID "special_anchor" below the element with the ID "body_wrap"
$('body_wrap').getElement('#special_anchor');
// Select the first element with CSS class name "special_anchor_class" under the element with ID "body_wrap"
$('body_wrap ').getElement('.special_anchor_class');

Reference code:

Copy code Code As follows:

anchor
another anchor
special anchor
special anchor
another special anchor

$$ ();
The $$ function allows you to quickly select multiple elements and form an array (a list that you can manipulate, retrieve, and reorder in any way). You can select multiple elements by tag name (such as div, a, img, etc.), or ID, or various combinations of them. As one reader pointed out, you can do a lot more with $$ than we've covered here.
Reference code:

Copy code The code is as follows:

// Select this page All divs
$$('div');
// Select the element with ID "id_name and all divs
$$('#id_name', 'div');

Reference code:

Copy code The code is as follows:

a div

a span

. getElements();
.getElements(); is very similar to .getElement();, but it returns all elements that meet the requirements and form an array. You can use .getElements( like the .getElement(); method. );.
Reference code:

Copy code The code is as follows:

// Select all links under the element with ID "body_wrap"
$('body_wrap').getElements('a');
// Select the element with ID "body_wrap" All the child elements with the CSS class name "special_anchor_class" below
$('body_wrap').getElements('.special_anchor_class');

Reference code:

Copy code The code is as follows:

anchor
another anchor
special anchor a>
another special anchor

Include and exclude with operators Results
Operators
MooTools 1.2 supports several operators that allow you to further streamline your selection operations. You can use these operators in .getElements(); to include or exclude specific results. MooTools supports 4 operators, each of which can be used to select an input element by name.
= : equal to
Reference code:
//Select the input element with name "phone_number"
$('body_wrap').getElements('input[name=phone_number]');
^=: Start with...
Reference code:
//Select the input element whose name starts with "phone"
$('body_wrap').getElements('input[name^=phone]' ; $=number]');
!= : Not equal to
Reference code:
// Select the input element whose name is not equal to "address"
$('body_wrap').getElements('input [name!=address]');
Reference code:

(Fdream note: Input is just an example here, you can also use this method to select other elements, such as div, a, etc.)
To use the operator, you must first specify the type of the element (such as input here), and then Specify the attribute you want to filter (such as name here), plus your operator, and finally select your filter string.
Selector based on element order
even (even number selection)
With this simple selector, you can select elements with even numbers. Note: This selector starts counting from 0, so the first element is in even order.
Reference code:
// Select the div with an even number
$$('div:even');
Reference code:

Even

Odd

Even

Odd

odd (odd selection)
Same as even, except that it selects elements with odd numbers.
Reference code:
// Select all divs with odd numbers
$$('div:odd');
Reference code:

Even

Odd

Even

Odd

> ;
.getParent();
Through the .getParent(); method, you can get the parent element (parent) of an element.
Reference code:
// Select the parent element of the element with ID "child_id"
$('child_id').getParent();
Reference code:

Even

Code example
Any MooTools UI development starts with selectors. Here are some very simple examples demonstrating how to use selectors to manipulate DOM elements.
Reference code:
// Set the background color of all spans to #eee
$$('span').setStyle('background-color', '#eee');
// Set the background color of all spans with odd numbers to #eee
$$('span:odd').setStyle('background-color', '#eee');
// Set the ID to body_wrap The background color of all spans with the CSS class name .middle_spans under the element is #eee
$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');
Reference code:




Copy code

The code is as follows:

Even
Odd
< ;span class="middle_spans">Even
Odd

Download the zip package and Try it
This zip package contains a simple html file, the MooTools 1.2 core library, an external js file and the example you see above.

Learn more…

This does not mean that this is the complete list of features of the selector in MooTools 1.2, it is just to help you get started and tell you what features MooTools provides you. To learn more about selectors, please refer to the following documentation:

• There is a lot of documentation about the Element selector
• By the way, you can also take a lookSelectors

Article about $$ selector on MooTools Blog

This is a very good blog post on mootools.net about the $$ selector and its many variations . You’ll never believe what you can do with this selector, and this article is well worth a read.

Slickspeed Selector

Here is an experiment done by others on MooTools to measure how fast different libraries are when selecting elements. This is cool in its own right, but these selector examples are very valuable. All selector features here can be implemented through the $$ method.

W3C Selector

MooTools also lets you harness the power of pseudo-selectors (as demonstrated by Slickspeed above). Here is a W3C article about selectors that is definitely worth reading (if only the list of selectors is useful to you). I'm not sure if MooTools' $$ selector supports every single selector on this page, but at least most of them. Feel free to tell me more about this.