朴人博客

最近接触dojo，发现dojo很强大了，但没有系统学习过dojo，用起来还是很吃力，譬如不知道基础的dom操作等，都得找文档临时学习。总体来说，dojo目前的写法类似于extjs，但又不局限于extjs之类的框架。下面分享一下基础的dom操作函数及说明。

基本的DOM操作只是用到了dojo的核心文件.使用dojo.query将返回一个匹配到的节点数组dojo.Nodelist, 这个数组内建了一些常用的方法. 可以操作DOM

使用dojo的方法:

dojo.ready(function(){
	//TODO
});

TODO部分实现你想要的dojo操作。

获取元素节点:

dojo.byId("demo"); //获取ID为demo的元素
dojo.query("#demo"); //获取ID为demo的元素
dojo.query(".demo"); //获取所有class为demo的元素
dojo.query(".demo > li"); //获取class为demo的元素中, 所有直接子集li元素
dojo.query("input[name='demo']"); //获取拥有name属性,且属性值为demo的input元素
dojo.query(".demo", dojo.byId("p_demo")); //从id为p_demo的元素中获取所有class为demo的元素

创建元素节点:

dojo.create("li", {
	id:"demo",
	className:"deLeGemo",
	innerHTML:"create node",
	style:{
		"color":"red",
		"fontWeight":"bold"
	}
}, refNode, "before");
 
dojo.create(str, attrs, refNode, pos);

pos有7个可用取值：
1. [null] 新创建的元素将作为refNode的子元素, 且添加到refNode中最后的位置
2. [before] 新创建的元素将作为refNode的同辈元素, 且位于refNode的前边
3. [after] 新创建的元素将作为refNode的同辈元素, 且位于refNode的后边
4. [only] 新创建的元素将取代父元素内所有子元素, 添加到refNode内部
5. [replace] 新创建的元素将直接替换点父元素
6. [first] 新创建的元素将作为refNode的子元素, 并添加到所有子元素的最前边
7. [last] 新创建的元素将作为refNode的子元素, 并添加到所有子元素的最后边

操作节点的一些方法:

dojo.query(".demo").style("color","red").removeClass("fontStyle").addClass("layoutStyle");
dojo.query(".demo").style({color:"red",fontWeight:"bold"}).removeClass("fontStyle").addClass("layoutStyle");
 
var node = dojo.byId("node");
dojo.addClass(node, "className");

删除节点的所有子节点(简单描述: 清空节点),删除节点及其所有自己点(简单描述: 删除节点)

var node = dojo.byId("node");
dojo.empty(node);
dojo.destroy(node);

移动节点(将"node"节点, 移动到"refNode"节点的"pos"位置),pos的参数类似上边创建节点(dojo.create)部分(未验证).

var node = dojo.byId("node");
var refNode = dojo.byId("refNode");
dojo.place(node, refNode, pos);

• 固定链接：https://www.poorren.com/dojo-dom-function
• 文章标签：dojo，dom，node，操作
• 扫二维码：Dojo基本DOM操作函数记录
• 版权所有：除"转载分享"分类外，未经注明，均为原创、整理，转载请注明出处。