dojo/query (part 1)
簡介
在 dojo 中，要搜尋並鎖定 DOM Tree 中的元件 (element) ，除了透過 dojo/dom 模組的 dom.byId() 及透過 dijit/registry 模組的registry.byId() 之外，還有一個 dojo/query 模組可供使用。前二者不同的地方在於： dom.byId() 根據傳入的 id 屬性值，直接傳回一個 DOM 的元件，而 registry.byId() 則根據傳入的 id 屬性值，傳回一個 dijit (dojo widget) 物件 (object)，還要進一步使用 registry.byId().domNode 才能真正取得 DOM 元件；即便如此，取得的元件和 dom.byId() 所傳回的元件稍有不同，可以用 console.log() 函式將兩者的輸出比較一下，就明白了。如果要變更或使用 DOM 元件，最好直接使用 dom.byId()。這兩者都只能使用 id 的屬性值作為搜尋的條件。
dom/query 模組在搜尋條件上，使用了 CSS3 的選擇器 (selector)，因此，在搜選的條件上廣泛了許多。（事實上 dojo 有好幾個選擇器可供選用，但 CSS3 的選擇器己經足以應付大多數的需求，所以也不用費事再試著去設定和使用其它的選擇器了。） id、標記名 (tag)、 CSS 類別名 (class)、屬性值等等，都可以用來搜尋 DOM 中的元件。dom/query 的傳回值為 NodeList，其中包含所有符合搜尋條件的元件，NodeList 本質上就是個 javascript 的陣列 (Array)，本身具有的函式不多，但可以透過加載下列的幾個模組擴充其功能：
dojo/query 這個模組中提供最重要的函式是 instantiate()，這個函式可以用程式法將所有選取到的元件轉變成 dojo 的 dijit。
- dojo/NodeList-data
- 在元件中添加自訂屬性的擴充功能。這個擴充功能實際上用 dojo/dom-attr 模組就可以做到大部份的功能，個人猜想它應該是因為 HTML5 之前用 "data-" 前導的自訂屬性並非標準，為此而存在的。在加載了 NodeList-manipulate 模組之後，NodeList 也具有 attr() 函式，加載這個模組就顯得有點多餘了。
- dojo/NodeList-dom
- 模擬 dojo/dom-* 的功能。
- dojo/NodeList-html
- 變更元件內容的擴充功能。
- dojo/NodeList-manipulate
- 這個擴充模組可以讓 dojo 像 jQuery 一樣對 DOM Tree 運作。個人認為這個擴充模組最好用了，只要加載了這個模組，就具有 dojo/NodeList-data、dojo/NodeList-dom 及 dojo/NodeList-html 三個模組的函式，可以針對符合選取條件的所有元件做批次作業。這樣就方便許多了。
- dojo/NodeList-traverse
- 擴充尋訪 (traverse) 的功能，這個功能也很好用，語法也跟 jQuery 很類似。
- dojo/NodeList-fx
- 添加動畫的功能。像是 anim(), fadeIn(), fadeOut(), wipeIn(), wipeOut(), slideTo() 等等。大約就是 dojo/_base/fx, dojo/fx, 及 dojox/fx 三個模組的集合版。
範例
範例中展示如何使用 instantiate() 函式，將一個清單中，CSS 類別為 .button 的三個項目都轉變成按鈕。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin:0 auto;
width:1000px;
height:100%;
padding-top:20px;
}
</style>
HTML
<body class="claro">
Fruit Buttons
- Apple
- Banana
- Cherry
在 HTML 中建置一個具有三個項目的無序號清單。
Script
第 20~25 行使用 instantiate() 函式將清單項目轉化成 dojo 的按鈕 (Button)。
第 26 行取得第二個按鈕的 DOM 元件。
沒有留言:
張貼留言