雖然到現在為止，留言中還沒有一個人看好 Dojo ，但是我還是準備繼續寫下去，不保證能寫完，也許哪天不想寫了，或者另有所愛了，可能就結束了，呵呵。 另外，相對于效率，我還是更喜歡組織有序的代碼，mootools 也是不錯，好像組件庫現在還不太完善。 最后，自己也是邊學邊寫，很多地方可能有錯誤，希望大家發現后多多指正。 這一篇來看看選擇器吧，其實都大差不差，你要原先玩過 jQuery 或者 Mootools，應該一下就能看明白。

版權聲明：本博客文章如非特別注明，均為原創，作者保留所有權利！歡迎轉載，轉載請注明作者左洸和出處BlogJava

準備工作
這一篇里，Dojo 庫直接從 Google 服務器上引用，這樣，本機只需要一個 html 頁面就可以運行了，調試信息打印用 Firefox + Firebug 插件。整個框架如下，后面一點一點的往里面填代碼：

頁面在瀏覽器中顯示如下效果

a1:id=a1 a2:id=a2 a3:id=a3 a4:class=foo a5:class=foo h1 a6 a7:class=foo a8:class=foo h2

腳本代碼里有兩個自定義的函數 printElement 和 printArray ，這個您不用管他，他們只是負責打印信息，需要留意的代碼在后面。
dojo.addOnLoad() 函數是整個程序的入口，就相當于 main 函數。
靜態頁面里放了8個超鏈接元素、2個 h1 元素，用他們來做選擇試驗。

版權聲明：本博客文章如非特別注明，均為原創，作者保留所有權利！歡迎轉載，轉載請注明作者左洸和出處BlogJava

正式開始
dojo 有兩種選擇元素的方法：dojo.byId() 和 dojo.query() ，他們的區別是，dojo.byId() 返回一個元素，dojo.query() 返回數組

1、根據 id 選擇。選擇 id 為 "a1" 的 超鏈接：
node=dojo.byId(a1);
printElement("dojo.byId(a1):",node);
或者
arr=dojo.query('#a1')//注意這里的 # 符號
printArray("dojo.query('#a1')",arr);
這兩段代碼效果是一樣的，第一段代碼返回一個元素，第二段代碼返回含有一個元素的數組。您可以將任意一段代碼填空到上面框架中的相應位置，運行一下，顯示結果如下：
dojo.byId(a1)
a1:id=a1
或者
dojo.query('#a1')
a1:id=a1

2、根據類型選擇。選擇所有 a  （超鏈接元素）元素
arr=dojo.query('a');
printArray("dojo.query('a'):",arr);
填空運行，會顯示8個超鏈接的innerHTML

3、根據樣式名選擇。選擇所有樣式為 foo 的元素
arr=dojo.query(".foo"); //注意這里的 . 符號
printArray("dojo.query('.foo')",arr);
填空運行，會顯示a4  a5  a7  a8  四個超鏈接的innerHTML

4、選擇第一個。選擇第一個 a 元素
arr=dojo.query('a : first-child');
printArray("dojo.query('a:first-child')",arr);
這里會選中 a1 a3 a6，為什么會出現三個呢？因為這三個都是對應父節點的第一個元素，后面會講怎么只選當前直接節點下的元素。

5、選擇指定節點下的所有子元素（包括間接子元素）。選擇 "sub_1" 下的所有 a 元素
arr=dojo.query("a", "sub_1");
printArray("dojo.query('a', 'sub_1')",arr);
 或者
arr=dojo.query('#sub_1 a');
printArray("dojo.query('#sub_1 a')",arr);
或者
arr=dojo.query('div#sub_1 a');
printArray("dojo.query('div#sub_1 a')",arr);
這三段代碼效果相同，都選中 a3 a4 a5 a6 a7 a8。注意第三種方法，不但指定父節點的 id 為 "sub_1" ，還指定父節點類型為 div

6、選擇直接子元素。在指點節點 "sub_1" 的直接子元素中，選擇所有 a 元素
arr=dojo.query('> a' , "sub_1"); //注意：大于號后面要有空格
printArray("dojo.query('> a','sub_1'))",arr);
或者
arr=dojo.query('#sub_1  > a'); //注意：大于號后面要有空格
printArray("dojo.query('#sub_1 > a')",arr);
或者
arr=dojo.query('div#sub_1  > a'); //注意：大于號后面要有空格
printArray("dojo.query('div#sub_1 > a')",arr);
這三段代碼效果相同，都選中 a3 a4 a5，而間接子節點沒有選。這里，> 大于號代表直接子節點，a 代表類型，您可以把 a  換成 h1 或者 * 試試，看看什么效果。

7、根據元素的屬性值選擇。
arr=dojo.query('a[id=a2]');
printArray("dojo.query('a[id=a2]')",arr);
這里選擇 id 屬性值 等于"a2"的元素。還有其他判斷方法：
element[attr = "bar"] : 屬性值等于"bar"
element[attr != "bar"] : 屬性值不等于"bar"
element[attr ^= "bar"] : 屬性值等于以"bar"開始
element[attr$ = "bar"] : 屬性值等于以"bar"結束
element[attr ~= "bar"] : 屬性值是一個列表，其中有一個值等于"bar"
element[attr *= "bar"] : 屬性值是一個字符串，其中包含"bar"

8、選擇第n個元素
arr=dojo.query('a:nth-child(1)');
或者
arr=dojo.query('> a:nth-child(1)');
您現在應該能分辨出兩種方法的不同了吧，第一種是全部的，第二種是直接的。

9、選擇(奇)偶元素
arr=dojo.query('a:nth-child(even)');
或者
arr=dojo.query('> a:nth-child(even)');

這些應該夠用了吧，官方文檔里還有更多的方法，看不太懂，到用的時候再說吧！

版權聲明：本博客文章如非特別注明，均為原創，作者保留所有權利！歡迎轉載，轉載請注明作者左洸和出處BlogJava 

所屬分類的其他文章:

Dojo QuickStart 快速入門教程 (2) 基本框架
Dojo QuickStart 快速入門教程 (1) Why Dojo

//==========================================