I'm VC

主页 > Web开发 > MooTools >

mootools框架【八】-Dom篇：Css查询支持之Dom.js

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

1.方法:$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的超链接元素

2.方法：$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的扩展方法：

3.方法：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个链接

4.方法：getElementById

作用：如同document.getElementById方法一样，该方法也是按照指定id来获

取元素，只不过是再当前元素之下的范围内查找。

例子：$('myDiv').getElementById('link2');

5.方法：getElement

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

器的第一个元素。

例子：$('myDiv').getElement('a');

6.方法：getElementsBySelector

作用：功能和getElements大致相同，并且支持css选择器中的逗号。该方法使

用的时候可以用$$来替代。

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

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

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

getElementsByClassName

document.getElementsByClassName('my_clazz');

补充说明:标准javascript中只有document有getElementsByTagName。经过扩展，mootools又让每个Element元素可以使用getElementsByTagName方法：　$('myDiv').getElementsByTagName('a');

这部分的扩展已经让mootools的对象获取方式足够方便和强大

文章来源: http://www.cnblogs.com/ziyiFly/archive/2008/09/11/1289239.html

延伸阅读：

mootools【九】- 工具类Hash和Color

mootools【十】- window的扩展及多彩世界

MooTools替代Prototype

mootools【一】- 起步篇

jQuery和MooTools的真正区别