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