官方教程：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下所有子節點 }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。