Dojo DOM Functions -(下)

本篇接續 Dojo DOM Functions -(上) 介紹如何以簡單、跨瀏覽器的方式，操作 DOM 物件。

上一篇解說了如何取得節點 (dojo.byId)，和建立新節點 (dojo.create)。如果我們想要放置一個我們已經有的節點，那就使用 dojo.place

dojo.place

dojo.create 的 input 變數有

要放置的 DOM 節點或節點的(字串)ID
做為參考的 DOM 節點或節點的(字串)ID
相對於參考節點的位置(此變數可不指定，預設為最後面 "last" )

dojo.place 的結構與 dojo.create很相似，事實上在底層 dojo.create 這個函數也使用到 dojo.place。兩者差別在於，使用 dojo.place 的情況下，我們已經有要放置的節點，因此不需要設定節點內容。
在開始範例之前，我們先加入四個按鈕到上一篇的範例 HTML 中(下面亦有完整程式碼)：

<button onclick="moveFirst();">The first item</button>
<button onclick="moveBeforeTwo();">Before Two</button>
<button onclick="moveAfterFour();">After Four</button>
<button onclick="moveLast();">The last item</button>

每個按鈕呼叫的 script 定義如下：

function moveFirst(){
    var list = dojo.byId("list"),
        three = dojo.byId("three");
 
    dojo.place(three, list, "first");
}
 
function moveBeforeTwo(){
    var two = dojo.byId("two"),
        three = dojo.byId("three");
 
    dojo.place(three, two, "before");
}
 
function moveAfterFour(){
    var four = dojo.byId("four"),
        three = dojo.byId("three");
 
    dojo.place(three, four, "after");
}
 
function moveLast(){
    var list = dojo.byId("list"),
        three = dojo.byId("three");
 
    dojo.place(three, list);
}

完整的程式碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo: DOM Functions</title>
 
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>
        <script>
    function moveFirst(){
            var list = dojo.byId("list"),
            three = dojo.byId("three");
 
            dojo.place(three, list, "first");
    }
 
    function moveBeforeTwo(){
            var two = dojo.byId("two"),
            three = dojo.byId("three");
 
            dojo.place(three, two, "before");
    }
 
    function moveAfterFour(){
            var four = dojo.byId("four"),
            three = dojo.byId("three");
 
        dojo.place(three, four, "after");
    }
 
    function moveLast(){
            var list = dojo.byId("list"),
            three = dojo.byId("three");
 
            dojo.place(three, list);
    }
        </script>
    </head>
    <body>
    <button onclick="moveFirst();">The first item</button>
    <button onclick="moveBeforeTwo();">Before Two</button>
    <button onclick="moveAfterFour();">After Four</button>
    <button onclick="moveLast();">The last item</button>
        <ul id="list">
            <li id="one">One</li>
            <li id="two">Two</li>
            <li id="three">Three</li>
            <li id="four">Four</li>
            <li id="five">Five</li>
        </ul>
    </body>
</html>

執行以上範例，"Three" 會根據按的按鈕移動位置。所有 dojo.place 的位置變數(第三個變數)可以設定的有 "before" ， "after" ， "replace" ， "only" ， "first" ， "last" ，和指定數字。
若使用數字指定位置，會將要放置的節點視為參考節點的子節點，並以我們設定的數字作為順序( 由0起算)

dojo.place 類似 JavaScript 原來的 parentNode.appendChild(node) ，不過指定位置更方便。

dojo.destroy 和 dojo.empty

我們已經了解新增 dojo.create 和修改 dojo.place 了，接下來要怎麼刪除 DOM 節點呢？
在 Dojo 中有兩個做法： dojo.destroy 會刪除某個節點本身和它所有子節點；而 dojo.empty 只會刪除我們指定的那個節點的子節點。
這兩個函數都只有一個變數，那就是某個我們想刪除的 DOM 節點，或是該節點的 Id。

我們現在再加兩個按鈕和呼叫的 script 到剛才的檔案中：

<button onclick="destroyFirst();">Destroy the first list item</button>
<button onclick="destroyAll();">Destroy all list items</button>

function destroyFirst(){
    var list = dojo.byId("list"),
        items = list.getElementsByTagName("li");
 
    if(items.length){
        dojo.destroy(items[0]);
    }
}
 
function destroyAll(){
    dojo.empty("list");
}

按下第一個按鈕會刪除 list 中的第一個節點，按第二個按鈕會刪除 list 中所有節點。

我們已經了解怎麼使用 Dojo 做基本的 DOM 操作，但是有沒有發現到，不管是 dojo.create ， dojo.place ， dojo.destroy ，或 dojo.empty，都必須指定 DOM 節點的 Id (或事先使用 dojo.byId 先取得節點，這樣也必須知道 Id才行)，但是有時候節點並沒有指定 Id 該怎麼辦？

那就要用到 dojo.query 了。

Coyan Lee | 李可暘

20110425

Dojo DOM Functions -(下)

dojo.place

dojo.destroy 和 dojo.empty

沒有留言:

張貼留言