Dojo学习笔记——Dom功能

最新推荐文章于 2022-05-10 22:04:44 发布

pumbaa-peng

最新推荐文章于 2022-05-10 22:04:44 发布

阅读量1k

点赞数

分类专栏： JavaScript Dojo

JavaScript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Dojo

3 篇文章 0 订阅

订阅专栏

难度：初学者 Dojo版本：1.8

原文： http://dojotoolkit.org/documentation/tutorials/1.8/dom_functions/

开始

使用的示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo: DOM Functions</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.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>

require(["dojo/domReady!" ]保证了所有对DOM的操作必要到等到DOM加载完全后再执行

获取

使用dojo/dom的byId方法可以获取DOM元素，通过传递ID获得该ID的DOM节点对象，若未找到匹配的节点返回null值。

这与使用javaScript的document.getElementById基本等价，一个突出的优点在于若是传递的参数本身是一个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设置节点的文本。

创建

可以使用 dojo/dom-construct的 create方法创建元素，返回一个新的DOM元素节点。其参数包括：字符串形式的节点名，节点的属性对象，一个可选的父节点或兄弟节点，一个可选的相对于父节点或兄弟节点的位置（默认为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的列表元素被创建，其类别设置为 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>

这个例子定义了使用 domConstruct.place在列表中移动第三个节点的功能：

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

查看示例

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

pumbaa-peng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Dojo学习笔记——Dom功能

难度：初学者 Dojo版本：1.8原文：http://dojotoolkit.org/documentation/tutorials/1.8/dom_functions/开始使用的示例如下：Demo: DOM Functions<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.j
复制链接

扫一扫