MooTools framework "Eight"-dom article: CSS query support dom.js

Description: MooTools supports the use of CSS selector syntax to get ELEMENT nodes, doing the most things with minimal code. The tool methods to implement these functions are provided in dom.js as well as the element-level extensions.

1. Method: $E

Function: Get the first rule-compliant element by CSS selector syntax

Parameters:

Selector:css selector, such as a, #my_div等

Filter: Optional, filter range, default is document

Example:

<div id= "Mydiv" >
     <a href= "#" id= "Link1" >AAA</a>
     <a href= "#" id= "Link2" >BBB</a>
     <a href= "#" id= "Link3" >CCC</a>
</div>

$E (' A ', ' mydiv '); Gets the hyperlink element with ID Link1

2. Method: $ES

function: Get all conforming elements according to CSS selector syntax

Parameters:

Selector:css selector, such as a, #my_div等

Filter: Optional, filter range, default is document

Example:

<div id= "Mydiv" >
     <a href= "#" id= "Link1" >AAA</a>
     <a href= "#" id= "Link2" >BBB</a>
     <a href= "#" id= "Link3" >CCC</a>
</div>

$ES (' A ', ' mydiv '); Get all 3 link elements

-------------------------------------------------------------------------------------------------------

How to extend an element:

3. Method: GetElements

Function: Gets the element under the current element that conforms to the given CSS selector

Example:

<div id= "Mydiv" >
     <a href= "#" id= "Link1" >AAA</a>
     <a href= "#" id= "Link2" >BBB</a>
     <a href= "#" id= "Link3" >CCC</a>
</div>

$ (' mydiv '). GetElements (' a '); Get 3 links under Mydiv

4. Method: getElementById

Function: As with the document.getElementById method, this method is also obtained by the specified ID

Takes an element, except to find it in the range below the current element.

Example: $ (' mydiv '). getElementById (' link2 ');

5. Method: GetElement

Function: Functions are like $e, except that the lookup range is the current element. Gets the specified selection under the current element

The first element of the device.

Example: $ (' mydiv '). GetElement (' a ');

6. Method: Getelementsbyselector

Function: functionality is roughly the same as getelements, and supports commas in CSS selectors. This method enables

Use the time can use $$ to replace.

Example: $ (' mydiv '). Getelementsbyselector (' #link1, #link2 ');

---------------------------------------------------------------------------------------------------

Document is also extended to a method based on the above extension:

Getelementsbyclassname

Document.getelementsbyclassname (' My_clazz ');

Supplemental Note: Only document in standard JavaScript is getelementsbytagname. Extended, MooTools also allows each element element to use the getElementsByTagName method: $ (' mydiv '). getElementsByTagName (' a ');

This part of the expansion has made MooTools's object access easy and powerful

Article Source: http://www.cnblogs.com/ziyiFly/archive/2008/09/11/1289239.html