dojo/dom-construct

簡介

dojo 針對 Javascript 的擴充其中很大一部份是在對 DOM 的操作上。相對於 Javascript 在操作 DOM 時所使用冗長的 API 函式名稱，dojo 不僅僅提供了一組比較簡單的語法，同時也處理了不同流覽器間相容性的問題。

dojo/dom-construct 的主要作用在透過程式以改變 DOM Tree 的結構，可以增加、減少或替換節點 (node)。主要的函式如下：

toDom(htmlString): 將參數中的 htmlString 字串值轉換成一個節點，並傳回該節點。

place(node, refNode, position)

置於 refNode 的 position 位置; node 參數也可以用 HTML 片段來取代，直接將該 HTML 片段加入 refNode 的 position 位置。positon 的值為字串或數值，預設為 "last"。允許值如下：

before: 將 node 置於 refNode 之前。

after: 將 node 置於 refNode 之後。

first: 將 node 加入，成為 refNode 的第一個子節點。

last: 將 node 加入，成為 refNode 最後一個子節點。

only: 將 node 加入，成為 refNode 唯一的子節點；此時，refNode 原先所有的子節點都會被清除。

replace: 用 node 來替換 refNode。替換後，refNode 節點就不存在了。

number: 當 position 的值為一個數值時，dojo 會將 node 加入成為 refNode 的第 number 個子節點。在加入 <ul> 及 <ol> 的清單項目 <li> 時相當便利；計數時由 0 開始。要特別注意的是：refNode 的文字節點 (text node) 也在計數之中，而 0 所代表的便是這個 refNode 的文字節點。以本文的這一段 <ul> 清單為例：「positon 的值為字串或數值，允許值如下：」這一段文字，便是節點 0。寫一段小程式測一下便很容易理解了。如果 number 遠大於子節點的個數，則自動成為 refNode 的最後一個子節點。

create(tag, attrs, refNode, position): 這個函式可以一次做完：建立節點、設定節點的屬性及加入節點到 refNode 的 position 的位置。實際使用狀況，看下列例子比較清楚。

empty(node): 將 node 所有的子節點清除。

destroy(node): 將 node 節點本身及其所有子節點都清除。

範例

範例中先建立一個方塊，兩秒後，程式會在方塊中加入 "Now you see me!" 這行文字，再過兩秒會在方塊下方，加入底色為淡藍色的 "New" 字樣。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    width:1000px;
    height:100%;
    padding-top:20px;
}
.box {
    width:300px;
    height:200px;
    padding:10px;
    border: 2px solid black;
}
.child {
    color:blue;
}
</style>

CSS 中設定一個方塊的外觀屬性，及用 .child{} 設定方塊中三個段落中字體的顏色。

HTML

<body class="claro">

    Wait for a few seconds
    here
        I am the First child node
        I am the Second child node
        I am the Third child node
    

</body>

Html 中建立一個具有三個 <p> 標記的 <div>。

Script

第 18 行的效果等於第 15~16 行兩行的效果。

熊伯的外接硬碟

2016年3月11日星期五