开始
使用的示例如下：
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.8.1/dojo/dojo.js" 7 data-dojo-config="async: true"> 8 </script> 9 <script> 10 require(["dojo/domReady!"], function() { 11 }); 12 </script> 13 </head> 14 <body> 15 <ul id="list"> 16 <li id="one">One</li> 17 <li id="two">Two</li> 18 <li id="three">Three</li> 19 <li id="four">Four</li> 20 <li id="five">Five</li> 21 </ul> 22 </body> 23 </html>
"dojo/domReady!"]保证了所有对DOM的操作必要到等到DOM加载完全后再执行
获取使用dojo/dom的byId方法可以获取DOM元素，通过传递ID获得该ID的DOM节点对象，若未找到匹配的节点返回null值。这与使用javaScript的document.getElementById基本等价，一个突出的优点在于若是传递的参数本身是一个DOM节点则立即返回该节点。这是一个例子：1 // Require the DOM resource 2 require(["dojo/dom", "dojo/domReady!"], function(dom) { 3 function setText(node, text){ 4 node = dom.byId(node); 5 node.innerHTML = text; 6 } 7 var one = dom.byId("one"); 8 setText(one, "One has been set"); 9 setText("two", "Two has been set as well"); 10 });
setText设置节点的文本。
创建
可以使用dojo/dom-construct的
create方法创建元素，返回一个新的DOM元素节点。其参数包括：字符串形式的节点名，节点的属性对象，一个可选的父节点或兄弟节点，一个可选的相对于父节点或兄弟节点的位置（默认为last）。以下是例子：1 require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"], 2 function(dom, domConstruct) { 3 var list = dom.byId("list"), 4 three = dom.byId("three"); 5 domConstruct.create("li", { 6 innerHTML: "Six" 7 }, list); 8 domConstruct.create("li", { 9 innerHTML: "Seven", 10 className: "seven", 11 style: { 12 fontWeight: "bold" 13 } 14 }, list); 15 domConstruct.create("li", { 16 innerHTML: "Three and a half" 17 }, three, "after"); 18 });
一个简单的包含文本Six的列表元素被创建并加到了列表末尾，接着另一个包含文本Seven的列表元素被创建，其类别设置为seven，样式设为粗体，追加到列表末尾。最后包含内容Three
and a half的元素被创建，插入到ID为three的元素之后。
放置
使用domConstruct.place放置已经存在的节点，参数如下：要放置的DOM节点或是一个节点的ID字符串，作为参考的DOM节点或是一个节点的ID字符串，一个可选的位置字符串，默认为last。在示例上加入一些按钮：
- <button id="moveFirst">The first item</button>
- <button id="moveBeforeTwo">Before Two</button>
- <button id="moveAfterFour">After Four</button>
- <button id="moveLast">The last item</button>
- 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);
- }
- // Connect the buttons
- on(dom.byId("moveFirst"), "click", moveFirst);
- on(dom.byId("moveBeforeTwo"), "click", moveBeforeTwo);
- on(dom.byId("moveAfterFour"), "click", moveAfterFour);
- on(dom.byId("moveLast"), "click", moveLast);
- });
位置参数的可能值为before，after，replace，only，first，last。
和原生的parentNode.appendChild(node)相比，其价值在于能简单的使用一致的API指定位置，无论引用的是父节点还是兄弟节点。
销毁
使用domConstruct.destroy可以销毁节点及其所有子节点，而domConstruct.empty则只销毁所给节点的子节点，其参数为DOM节点或节点的ID字符串。再添加两个按钮：
- <button id="destroyFirst">Destroy the first list item</button>
- <button id="destroyAll">Destroy all list items</button>
- function destroyFirst(){
- var list = dom.byId("list"),
- items = list.getElementsByTagName("li");
- if(items.length){
- domConstruct.destroy(items[0]);
- }
- }
- function destroyAll(){
- domConstruct.empty("list");
- }
- // Connect buttons to destroy elements
- on(dom.byId("destroyFirst"), "click", destroyFirst);
- on(dom.byId("destroyAll"), "click", destroyAll);
第一个按钮每点击一次销毁列表中第一个元素，第二个则清空列表。
