官方教程：Dojo DOM Functions
對dom的使用，需要引用包dojo/dom。
1.獲取節(jié)點，dom.byId
byId中既可以傳遞一個字符串，也可以傳遞一個節(jié)點對象

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.創(chuàng)建節(jié)點，domConstruct.create，創(chuàng)建一個新的節(jié)點
domConstruct需要引用包dojo/dom-construct，包括4個參數(shù)。
第一個：節(jié)點名，如"li"，"a"
第二個：屬性對象，可以設(shè)置需要創(chuàng)建節(jié)點的各個屬性、樣式、內(nèi)容和值
第三個：一個父節(jié)點或同級節(jié)點對象，可選
第四個：一個插入點標志字符串，由此決定是將第三個參數(shù)做為父節(jié)點附加到其內(nèi)部，或是做為同級節(jié)點插入，可選，默認為"last"表示附加到父節(jié)點最后，"first"表示附加到父節(jié)點最前，"before"表示插入到同級節(jié)點前，"after"表示插入到同級節(jié)點后

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.放置節(jié)點，domConstruct.place，改變已存在的一個節(jié)點的位置
domConstruct.place包括三個參數(shù)。
第一個：目標節(jié)點，是一個id字符串或節(jié)點對象，即需要放置的節(jié)點
第二個：關(guān)聯(lián)節(jié)點，是一個id字符串或節(jié)點對象，即目標節(jié)點將附加到該父節(jié)點最前或最后，或者，插入到該同級節(jié)點前或后
第三個：一個插入點標志字符串，由此決定是將第二個參數(shù)做為父節(jié)點附加到其內(nèi)部，或是做為同級節(jié)點插入其前后，可選，默認為"last"表示附加到父節(jié)點最后，"first"表示附加到父節(jié)點最前，"before"表示插入到同級節(jié)點前，"after"表示插入到同級節(jié)點后

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.毀滅節(jié)點，domConstruct.destroy，徹底刪除一個已存在的節(jié)點及其子節(jié)點。
如果僅需清空該節(jié)點下的子節(jié)點，而保留該節(jié)點則用domConstruct.empty。
參數(shù)都是一個id字符串或節(jié)點對象。
function destroyFirst(){ ????var list = dom.byId("list"), ????????items = list.getElementsByTagName("li"); ????????? ????if(items.length){ ????????domConstruct.destroy(items[0]);//刪除list下第一個li子節(jié)點 ????} } function destroyAll(){ ????domConstruct.empty("list");//清空list下所有子節(jié)點 }

總結(jié)

以上是生活随笔為你收集整理的dojo 七 DOM dojo/dom的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。