Mootools 1.2教程(2) DOM選擇器
2024-05-06 14:14:03
供稿：網友
如果你還沒有準備好，請先閱讀上一篇《Mootools 1.2教程(1)——MooTools介紹》。我們講了怎么引用MooTools 1.2以及怎么在domready里面調用你的腳本。
今天開始本系列教程的第2講。在這一講中，我們會學習幾種選擇HTML元素的方法。在許多方面，這是MooTools用得最多最基本的。畢竟，要創建一個基于HTML元素的交互性用戶體驗，你必須首先把它們掌握在手中。
基本的方法
$();
$函數是MooTools中基本的選擇器。你可以通過它來根據一個ID選擇DOM元素。
參考代碼：
代碼如下:
// 選擇ID為”body_wrap“的元素
$('body_wrap');
參考代碼：
代碼如下:
<div id="body_wrap">
</div>
.getElement();
.getElement();擴展了$方法，可以讓你簡化你的選擇操作。例如，你可以通過$方法來選擇ID為”body_wrap“的元素，然后選擇第一個子節點。.getElement();只選擇一個元素，如果有多個符合要求的元素則返回第一個元素。如果你給.getElement();方法一個CSS類名作為參數，你就會得到第一個有這個CSS類名的元素，而不是函數所有元素的數組。要選擇多個元素，則可以使用下面的.getElements();方法。
參考代碼：
代碼如下:
// 選擇ID為”body_wrap“的元素下面的第一個鏈接
$('body_wrap').getElement('a');
// 選擇ID為”body_wrap“的元素下面的ID為”special_anchor“的元素
$('body_wrap').getElement('#special_anchor');
// 選擇ID為”body_wrap“的元素下面第一個CSS類名為”special_anchor_class“的元素
$('body_wrap').getElement('.special_anchor_class');
參考代碼：
代碼如下:
<div id="body_wrap">
<a href="#">anchor</a>
<a href="#">another anchor</a>
<a id="special_anchor" href="#">special anchor</a>
<a class="special_anchor_class" href="#">special anchor</a>
<a class="special_anchor_class" href="#">another special anchor</a>
</div>
$$();
$$函數可以可以讓你快速選擇多個元素，并組成一個數組（一種你可以操作、獲取和以任何方式重新排序的列表）。你可以通過標簽名（如div、a、img等）、或者ID或者是他們的各種組合來選擇多個元素。就像一個讀者指出的那樣，你可以用$$做很多事情，遠遠超出我們這里所介紹的。
參考代碼：
代碼如下:
// 選擇這個頁面中的所有div
$$('div');
// 選擇ID為”id_name的元素和所有的div
$$('#id_name', 'div');
參考代碼：
代碼如下:
<div>
<div>a div</div>
<span id="id_name">a span</span>
</div>
.getElements();
.getElements();和.getElement();非常類似，不過它返回所有符合要求的元素，并組成一個數組。你可以想使用.getElement();方法那樣使用.getElements();。
