Dojo DOM 函式

呂建奎發表於2015-09-19
函式

在本教程中，您將學到如何使用Dojo簡單地跨平臺操作DOM。只需要基本DOM知識和幾個Dojo函式，您就能高效地建立、讀取、更新或是刪除頁面上的元素。

 

難度：初學者

 

Dojo 版本：1.6

開始上手

從基於瀏覽器的JavaScript受到關注時起，Document Object Model (DOM) 就是我們繪製所要內容的的地方，也是使用者所看到的介面。如果我們想要增強、替換或是向瀏覽器載入好的HTML新增點什麼東西，JavaScript和DOM便是我們所需要的。Dojo旨在使DOM操作變得更加簡單、高效，為此Dojo提供了一些方便的函式來解決不同瀏覽器間惱人的的相容性問題，並讓常用操作更加簡潔。

 

為了瞭解這些函式，我們將操作一個簡單的頁面，該頁面中有一個含有五個元素的無序列表：

 

[xhtml] view plaincopy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>Demo: DOM Functions</title>  
  6.    
  7.         <mce:script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" mce_src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></mce:script>  
  8.         <mce:script type="text/javascript"><!--  
  9.             dojo.ready(function(){          // "ready" entry point  
  10.    
  11.             });  
  12.           
  13. // --></mce:script>  
  14.     </head>  
  15.     <body>  
  16.         <ul id="list">  
  17.             <li id="one">One</li>  
  18.             <li id="two">Two</li>  
  19.             <li id="three">Three</li>  
  20.             <li id="four">Four</li>  
  21.             <li id="five">Five</li>  
  22.         </ul>  
  23.     </body>  
  24. </html>  

 

這個頁面已經含有Dojo指令碼標籤， 相信你已經認識dojo.ready程式碼塊。所有對DOM進行操作的程式碼必須等到DOM載入完畢後才能被執行。

 

檢索

事有先後：為了對DOM進行操作，我們首先需要知道如何從DOM中獲取元素。最簡單的方法是使用dojo.byId。在你將一個你想要獲得的元素的ID傳給dojo.byId之後，如果ID相符的DOM節點存在，你將獲得該節點，如果沒有匹配的節點，那麼將獲得null。

 

這和使用document.getElementById是等價的，但是使用dojo.byId有兩個優點：更簡潔，並解決了某些瀏覽器對getElementById實現的bug。另一個dojo.byId很棒的特點是，如果你將一個DOM節點傳給它，它將馬上返回該節點。這有助於建立同時適用字串與DOM節點的API。讓我們來看一個例子：

 

[javascript] view plaincopy
  1. function setText(node, text){  
  2.     node = dojo.byId(node);  
  3.     node.innerHTML = text;  
  4. }  
  5.    
  6. dojo.ready(function(){  
  7.     var one = dojo.byId("one");  
  8.    
  9.     setText(one, "One has been set");  
  10.     setText("two", "Two has been set as well");  
  11. });  

 

檢視示例

 

setText函式用來設定一個節點的文字內容，由於dojo.byId可以接受DOM節點作為引數，該函式也就可以接受字串或者DOM節點。

 

建立

另一個你會經常做的事情就是建立元素。Dojo不會阻止你使用原生的document.createElement方法來建立元素，但是建立一個元素併為其設定所有需要的屬性可能會是非常冗長的。更可怕的是，你將面對不少不同瀏覽器差異造成的額外屬性設定。而這使得dojo.create不可謂是一個更方便、可靠的選擇。

 

dojo.create有如下引數：節點名（字串）、節點的屬性（object）、可選的父節點或是兄弟節點、可選的與父節點或是兄弟節點的相對位置（預設為“last”）。它返回新建的DOM元素節點。讓我們看一個例子：

 

[javascript] view plaincopy
  1. dojo.ready(function(){  
  2.     var list = dojo.byId("list"),  
  3.         three = dojo.byId("three");  
  4.    
  5.     dojo.create("li", {  
  6.         innerHTML: "Six"  
  7.     }, list);  
  8.    
  9.     dojo.create("li", {  
  10.         innerHTML: "Seven",  
  11.         className: "seven",  
  12.         style: {  
  13.             fontWeight: "bold"  
  14.         }  
  15.     }, list);  
  16.    
  17.     dojo.create("li", {  
  18.         innerHTML: "Three and a half"  
  19.     }, three, "after");  
  20. });  

 

檢視示例

 

一個簡單的內容為“Six”的列表元素被建立並被新增到列表中。接著，另一個內容為“Seven”的列表元素被建立，它的className屬性為”seven”，該樣式使其字型為粗體，然後該元素被新增到列表中。最後，一個內容為“Three and a half”的列表元素被建立並被插入到ID為“three”的列表元素之後。

 

什麼時候該像這樣建立元素，什麼時候該直接設定一個容器的innerHTML屬性呢？如果你已經有一個你所需要的HTML內容的字串時，設定innerHTML屬性肯定會更快一點。但是，dojo.create的優勢在你想要建立節點但又不需要立即將他們新增到DOM中，或是當你想要插入或是新增一個新元素而不影響周圍的兄弟節點時就體現出來了。

 

安插

如果你已經有了一個節點並且想將安插到某處，你將會需要用到dojo.place。其引數如下：DOM節點或一個想要安插的節點的ID、DOM節點或是一個參照節點的ID、可選的位置（字串，預設為“last”）。這和我們看到的dojo.create的參數列很像，事實上，dojo.create在底層使用了dojo.place。在前面的例子基礎上，我們向頁面加了幾個按鈕：

 

[xhtml] view plaincopy
  1. <button onclick="moveFirst();">The first item</button>  
  2. <button onclick="moveBeforeTwo();">Before Two</button>  
  3. <button onclick="moveAfterFour();">After Four</button>  
  4. <button onclick="moveLast();">The last item</button>  

 

下面程式碼定義了一些使用dojo.place來移動列表中第三個節點的函式：

 

[javascript] view plaincopy
  1. function moveFirst(){  
  2.     var list = dojo.byId("list"),  
  3.         three = dojo.byId("three");  
  4.    
  5.     dojo.place(three, list, "first");  
  6. }  
  7.    
  8. function moveBeforeTwo(){  
  9.     var two = dojo.byId("two"),  
  10.         three = dojo.byId("three");  
  11.    
  12.     dojo.place(three, two, "before");  
  13. }  
  14.    
  15. function moveAfterFour(){  
  16.     var four = dojo.byId("four"),  
  17.         three = dojo.byId("three");  
  18.    
  19.     dojo.place(three, four, "after");  
  20. }  
  21.    
  22. function moveLast(){  
  23.     var list = dojo.byId("list"),  
  24.         three = dojo.byId("three");  
  25.    
  26.     dojo.place(three, list);  
  27. }  

 

檢視示例

 

安插位置的有效引數可以是"before"、"after"、"replace"、"only"、"first"或"last"。有關每種安插選項的含義請參見reference guide for dojo.place 。

 

在這個簡單的例子裡，dojo.place比原生的parentNode.appendChild(node)稍稍多做了一點事情。它可以簡單地指定安插的位置，無論是相對於父節點或是兄弟節點——使用一個一致的API。

 

刪除

通常你會建立節點，不過有時候，你也會想要刪除某些節點。Dojo提供了兩種方法來刪除節點：dojo.destory會刪除一個節點和其所有的子節點，而dojo.empty將只刪除一個節點的子節點。這兩種方法都接受一個DOM節點或是一個節點的ID作為引數。我們將向我們的頁面新增兩個按鈕：

 

[xhtml] view plaincopy
  1. <button onclick="destroyFirst();">Destroy the first list item</button>  
  2. <button onclick="destroyAll();">Destroy all list items</button>  

 

[javascript] view plaincopy
  1. function destroyFirst(){  
  2.     var list = dojo.byId("list"),  
  3.         items = list.getElementsByTagName("li");  
  4.    
  5.     if(items.length){  
  6.         dojo.destroy(items[0]);  
  7.     }  
  8. }  
  9.    
  10. function destroyAll(){  
  11.     dojo.empty("list");  
  12. }  

 

檢視示例

 

第一個按鈕在使用者按下時刪除列表中的第一個元素。第二個按鈕則清空整個列表。

 

總結

現在，我們有了一套比較全面的用來操作DOM的工具，從建立節點到移動節點再到刪除它們——但它們在同一個時刻都只能對一個節點進行操作。如果你想要對一些沒有ID的節點進行操作怎麼辦？下一個教程將會介紹dojo.query，它可以讓我們基於CSS選擇器來查詢、操作節點！

相關文章