Dojo------DOM基础之DOM功能
使用dojo来操作DOM是简单，跨浏览器的方式，首先看html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Demo: DOM Functions</title> 6 <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" 7 data-dojo-config="async: true"> 8 </script> 9 <script> 10 require(["dojo/domReady!"], function() { 11 12 }); 13 </script> 14 </head> 15 <body> 16 <ul id="list"> 17 <li id="one">One</li> 18 <li id="two">Two</li> 19 <li id="three">Three</li> 20 <li id="four">Four</li> 21 <li id="five">Five</li> 22 </ul> 23 </body> 24 </html>
一、Dom检索
使用dojo/dom的byId方法，接收id和DOM node节点对象为参数，如果不匹配，就返回NULL，等价于document.getElementById
有两个特点：
1、比较简短
2、传递一个DOM node节点，立即返回这个节点
如下代码：
1 require(["dojo/dom", "dojo/domReady!"], function(dom) { 2 3 function setText(node, text){ 4 node = dom.byId(node); 5 node.innerHTML = text; 6 } 7 8 var one = dom.byId("one"); 9 setText(one, "One has been set"); 10 setText("two", "Two has been set as well"); 11 12 });
二、Dom创建
也可以使用document.createElement方法来创建元素，使用dojo/dom-construct的 create 方法更方便可靠
参数：（节点的字符串名称，节点属性对象，父级节点或相邻节点（可选的参数），相对于父节点或相邻节点的位置（可选的参数）默认为“last”）
返回：新的DOM元素节点
代码如下：
1 require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"], 2 function(dom, domConstruct) { 3 4 var list = dom.byId("list"), 5 three = dom.byId("three"); 6 7 domConstruct.create("li", { 8 innerHTML: "Six" 9 }, list); 10 11 domConstruct.create("li", { 12 innerHTML: "Seven", 13 className: "seven", 14 style: { 15 fontWeight: "bold" 16 } 17 }, list); 18 19 domConstruct.create("li", { 20 innerHTML: "Three and a half" 21 }, three, "after"); 22 });
三、Dom布置位置
使用domConstruct.place来放置节点
参数：（DOM node节点或者节点的字符串id，DOM node节点或节点的字符串id作为一个参考，位置参数（可选的，默认“last”））
html代码如下：
1 <button id="moveFirst">The first item</button> 2 <button id="moveBeforeTwo">Before Two</button> 3 <button id="moveAfterFour">After Four</button> 4 <button id="moveLast">The last item</button>
dojo代码如下：
1 require(["dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/domReady!"], 2 function(dom, domConstruct, on){ 3 4 function moveFirst(){ 5 var list = dom.byId("list"), 6 three = dom.byId("three"); 7 8 domConstruct.place(three, list, "first"); 9 } 10 11 function moveBeforeTwo(){ 12 var two = dom.byId("two"), 13 three = dom.byId("three"); 14 15 domConstruct.place(three, two, "before"); 16 } 17 18 function moveAfterFour(){ 19 var four = dom.byId("four"), 20 three = dom.byId("three"); 21 22 domConstruct.place(three, four, "after"); 23 } 24 25 function moveLast(){ 26 var list = dom.byId("list"), 27 three = dom.byId("three"); 28 29 domConstruct.place(three, list); 30 } 31 32 // Connect the buttons 33 on(dom.byId("moveFirst"), "click", moveFirst); 34 on(dom.byId("moveBeforeTwo"), "click", moveBeforeTwo); 35 on(dom.byId("moveAfterFour"), "click", moveAfterFour); 36 on(dom.byId("moveLast"), "click", moveLast); 37 });
位置参数的值可以是（"before", "after", "replace", "only", "first", "last".）
三、Dom消亡
domConstruct.destroy 销毁一个节点
domConstruct.empty销毁一个节点的子节点
唯一参数：DOMnode节点或节点字符串
html代码如下：
1 <button id="destroyFirst">Destroy the first list item</button> 2 <button id="destroyAll">Destroy all list items</button>
dojo代码如下：
1 function destroyFirst(){ 2 var list = dom.byId("list"), 3 items = list.getElementsByTagName("li"); 4 5 if(items.length){ 6 domConstruct.destroy(items[0]); 7 } 8 } 9 function destroyAll(){ 10 domConstruct.empty("list"); 11 } 12 13 // Connect buttons to destroy elements 14 on(dom.byId("destroyFirst"), "click", destroyFirst); 15 on(dom.byId("destroyAll"), "click", destroyAll);
