mootools【八】 - Css查询支持之Dom.js

mootools支持通过Css选择器语法来获取元素节点，以最少的代码做最多的事情。在Dom.js中提供了实现这些功能的工具方法以及元素级的扩展。

工具方法：$E
作用：按照css选择器语法获取 第一个符合规则的元素
参数：
selector - css选择器,如a,#my_div等
filter - 可选，过滤范围，默认是document

< 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 ' );     // 获取的是id为link1的超链接元素

工具方法：$ES
作用：按照css选择器语法获取 所有符合规则的元素
参数：
selector - css选择器,如a,#my_div等
filter - 可选，过滤范围，默认是document

< 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');      // 获取所有3个链接元素

-------------------------------------------------------------------------------------------------------------------------
对Element的扩展方法：

方法：getElements
作用：获取当前元素下符合给出css选择器的元素

< 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 ' );    // 获取myDiv下的3个链接

方法：getElementById
作用：如同document.getElementById方法一样，该方法也是按照指定id来获取元素，只不过是再当前元素之下的范围内查找。

 $( ' myDiv ' ).getElementById( ' link2 ' );

方法：getElement
作用：功能如同$E,只不过查找范围是当前元素。获取当前元素下符合指定选择器的第一个元素。

$('myDiv').getElement('a');

方法：getElementsBySelector
作用：功能和getElements大致相同，并且支持css选择器中的逗号。该方法使用的时候可以用$$来替代。

$('myDiv').getElementsBySelector('#link1,#link2');

========================================================================
document又在以上扩展的基础上被扩展出一个方法： getElementsByClassName

document.getElementsByClassName('my_clazz');

标准javascript中只有document有getElementsByTagName。经过扩展，mootools又让每个Element元素可以使用 getElementsByTagName方法：

$('myDiv').getElementsByTagName('a');

这部分的扩展已经让mootools的对象获取方式足够方便和强大了。非常的棒！



  另外，mootools的作者貌似挺有意思的家伙，呵呵。

 
来自意大利的家伙啊，马里奥的同乡。