Dojo学习笔记——Dom功能

开始

使用的示例如下：

 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>

require(["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。在示例上加入一些按钮：

[html] view plain copy

<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在列表中移动第三个节点的功能：

[javascript] view plain copy

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字符串。再添加两个按钮：

[html] view plain copy

<button id="destroyFirst">Destroy the first list item</button>
<button id="destroyAll">Destroy all list items</button>

[javascript] view plain copy

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);

第一个按钮每点击一次销毁列表中第一个元素，第二个则清空列表。

posted on 2016-12-30 12:55 Sharpest 阅读(250) 评论(0) 收藏举报

刷新页面返回顶部