Dojo基本DOM操作函数记录打赏

最近接触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);


Dojo基本DOM操作函数记录
文章《Dojo基本DOM操作函数记录》二维码
  • 微信打赏
  • 支付宝打赏
  1. http://www.lunwen999.com/ 中国论文基地 中国论文网 论文网 代写论文 论文代写 论文格式 免费论文 毕业论文 硕士论文 本科论文 博士论文 工作总结 购买论文 发表论文 论文写作 论文定制 定制论文 代写毕业论文 代写硕士论文 代写博士论文

无觅相关文章插件,快速提升流量