原文地址：http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/
难度：低
版本：1.7
?
在这个教程中，你将学到如果使用DOJO来方便的操作DOM对象。操作DOM只是DOJO的的一小部分功能，通过它，你可以高效的取值，更新，增加和删除页面元素。
?
开始
javascript是基于浏览器的，DOM则是我们想要去展现给用户所看的界面。如果我们想在页面已经被加载完成后再进行组织修改页面，则就要使用javascript来修改DOM了。dojo的目标就是提供一种功能，能很方便的操作DOM对象，并能兼容各种浏览器，而且只使用很少量的代码就能实现。
下面是一个我们很常看的一组页面结构
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo: DOM Functions</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
data-dojo-config="async: true">
</script>
<script>
require(["dojo/domReady!"], function() {
});
</script>
</head>
<body>
<ul id="list">
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
<li id="four">Four</li>
<li id="five">Five</li>
</ul>
</body>
</html>
?
?代码中已经包含了dojo的标签，而且现在你也应该认识require这一块的意思了。在require这个块里是整个页面加载完成后将要执行的语句的地方。
?
检索
首先，为了操作它们，我们要先学习如何来取得页面的DOM对象。最简单的方法是使用dojo/dom的byId方法来取资源。当你传入一个ID值给dojo.byId时，你将会得到一个含有该ID值的DOM对象节点的返回值，如果找不到有该ID值的元素，则返回null.
?
这个功能等同于使用document.getElementById，但有两个不同处。第一，他比较短，而且能兼容不同浏览器。另一个特点是，你可以传入一个DOM节点的ID值，也可以直接传入一个dojo对象节点。如果传入的是一个dojo对象节点，将会把那个对象立即返回，这有利于取值的方便。看个例子。
?
// Require the DOM resource
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");
});
?
?运行示例
?
setText方法将会设置节点，因为使用的是dojo.byId所以，传入的参数是ID值或节点效果都是一样的。
?
创建
我们经常会去创建页面元素。dojo并不阻止你去使用docement.createElement方法来创建元素，但用这种方法创建和设置节点的属性将要写出大量的代码。dojo提供了一个兼容浏览器的新方法，使用dojo/dom-construct的创建方法。
?
domConstruct.create有以下几个参数。节点名，属性，子/父节点，放置的位置(默认是last)，返回值为创建的新的元素。看一个例子
?
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");
});
?
?运行示例
?
一个列表中的选项被创建，设置其内容为"Six"并加入于列表中。下一步，另一个选项被创建，设置内容为"Seven"，设置className值为"seven"，让其有了一个加粗的样式，并将其放置于列表中。最后创建一个选项，设置内容为"Three and a half"把它放置于列表的后面，并给定ID值为"three"。
?
当你使用这种方法创建元素时，相对于innerHTML来说会怎么样？如果你已经有了内容，那么使用innerHTML来设置是最快的，但是，如果你并不是马上就要设置其内容并放入到DOM中，那么就使用domConstruct.create
?
放置
如果你在页面中已经有一个节点了并想移动它，那么你就要使用domConstruct.place这个方法。这个方法的参数有：DOM节点或ID值，要关联的DOM节点或ID值，要放置的位置，默认为last。这很像domConstruct.create方法，事实上，domConstruct.create是使用了domConstruct.place方法。如
?
<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"
?
删除
这里有两种方法来删除一个节点。使用domConstruct.destroy删除节点并删除其所拥有的所有子节点。domConstruct.empty将只会删除其子节点。两种方法都只接收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);
运行示例
?
第一个按钮将删除第一个选项，第二个按钮将删除全部的列表
?
结论
至此，我们已经学了DOM对象主要的创建，移动，读取等操作，但他们都是一次只能操作一个对象。如果你想操作多个节点，你可以使用dojo/query方法