- 如何使用dojo操作DOM
创建一个简单的HTML页面,放置5个元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo: DOM Functions</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/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>
所有操作DOM的代码在DOM准备完成后才能被执行。
检索
首先,需要知道如何从DOM中获取元素。
最简单的方法:使用dojo/dom的byId方法。向dom.byId传递一个ID参数,使用这个ID检索DOM节点对象。如果没有匹配的节点,返回一个null值。与使用document.getElementById相比,具有两个优势:
- 敲的代码少;
- 解决部分浏览器不支持getElementById的问题。
另外,dom.byId传递了一个DOM节点,这对于创建API(需要字符串和DOM节点)有很大帮助。看下面的例子:
// 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函数设置了节点的文本信息,但是由于它向dom.byId传递了node参数,它将使用字符串类型的ID或DOM节点。
创建DOM节点
使用document.createElement非常繁琐,并且存在跨浏览器问题。最好使用dojo/dom-construct的create方法。它的参数包括:字符串类型的节点名称、对象类型的节点属性、可选的父节点或兄弟节点和可选的相对(父节点或兄弟节点的)位置。它返回一个新的节点元素。看下面的例子:
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");
});
布局
如果已有一个节点,想要放置这个节点需要使用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>
下面的例子定义了一个函数,这个函数使用 domConstruct.place把第三个节点在list周围移动。
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);
});
销毁
在dojo中有两种方式来删除节点
- dom-construct的destroy方法:销毁节点及其子节点;
- dom-construct的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);