官方教程:Dojo DOM Functions
對dom的使用,需要引用包dojo/dom。
1.獲取節點,dom.byId
byId中既可以傳遞一個字符串,也可以傳遞一個節點對象
require([
"dojo/dom"
,
"dojo/domReady!"
],
function
(dom) {
????
?????
function
setText(node, text){
????????
node = dom.byId(node);//通過已有對象
????????
node.innerHTML = text;
????
}
????
var
one = dom.byId(
"one"
);//通過字符串
????
setText(one,
"One has been set"
);
????
setText(
"two"
,
"Two has been set as well"
);
????
?});
2.創建節點,domConstruct.create,創建一個新的節點
domConstruct需要引用包dojo/dom-construct,包括4個參數。
節點名,如
第一個:"
li"
,"
a"
第二個:屬性對象,可以設置需要創建節點的各個屬性、樣式、內容和值第三個:一個父節點或同級節點對象,可選
第四個:一個插入點標志字符串,由此決定是將第三個參數做為父節點附加到其內部,或是做為同級節點插入,可選,默認為"last"表示附加到父節點最后,"first"表示附加到父節點最前,"before"表示插入到同級節點前,"after"表示插入到同級節點后
require([
"dojo/dom"
,
"dojo/dom-construct"
,
"dojo/domReady!"
],
????
function
(dom, domConstruct) {
????
?????????
var
list = dom.byId(
"list"
),
????????????
three = dom.byId(
"three"
);
????????
domConstruct.create(
"li"
, {
????????????
innerHTML:
"Six"
????????
}, list);
????????
domConstruct.create(
"li"
, {
????????????
innerHTML:
"Seven"
,
????????????
className:
"seven"
,
????????????
style: {
????????????????
fontWeight:
"bold"
????????????
}
????????
}, list);
????????
domConstruct.create(
"li"
, {
????????????
innerHTML:
"Three and a half"
????????
}, three,
"after"
);
????
?});
3.放置節點,domConstruct.place,改變已存在的一個節點的位置
domConstruct.place包括三個參數。
第一個:目標節點,是一個id字符串或節點對象,即需要放置的節點
第二個:關聯節點,是一個id字符串或節點對象,即目標節點將附加到該父節點最前或最后,或者,插入到該同級節點前或后
第三個:一個插入點標志字符串,由此決定是將第二個參數做為父節點附加到其內部,或是做為同級節點插入
其前后,可選,默認為"last"
表示附加到父節點最后,"first"表示附加到父節點最前,"before"表示插入到同級節點前,"after"表示插入到同級節點后
require([
"dojo/dom"
,
"dojo/dom-construct"
,
"dojo/on"
,
"dojo/domReady!"
],
????
function
(dom, domConstruct, on){
????????
?????????
function
moveFirst(){
????????????
var
list = dom.byId(
"list"
),
????????????????
three = dom.byId(
"three"
);
????????????
domConstruct.place(three, list,
"first"
);
????????
}
????????
function
moveBeforeTwo(){
????????????
var
two = dom.byId(
"two"
),
????????????????
three = dom.byId(
"three"
);
????????????
domConstruct.place(three, two,
"before"
);
????????
}
????????
function
moveAfterFour(){
????????????
var
four = dom.byId(
"four"
),
????????????????
three = dom.byId(
"three"
);
????????????
domConstruct.place(three, four,
"after"
);
????????
}
????????
function
moveLast(){
????????????
var
list = dom.byId(
"list"
),
????????????????
three = dom.byId(
"three"
);
????????????
domConstruct.place(three, list);
????????
}
????????
});
4.毀滅節點,
domConstruct.destroy,徹底刪除一個已存在的節點及其子節點。
如果僅需清空該節點下的子節點,而保留該節點則用domConstruct.empty。
參數都是一個id字符串或節點對象。
function
destroyFirst(){
????
var
list = dom.byId(
"list"
),
????????
items = list.getElementsByTagName(
"li"
);
????????
?????
if
(items.length){
????????
domConstruct.destroy(items[0]);//刪除list下第一個li子節點
????
}
}
function
destroyAll(){
????
domConstruct.empty(
"list"
);//清空list下所有子節點
}