dojo 基本DOM操作

九月 9, 2011

目前项目上用的还是jQuery, 但是之后会陆续的转向dojo.. 对比jQuery的选择器部分, 学习了下dojo的基本DOM操作. dojo的介绍就不说了. 本身也是大菜一颗… 说不明白再误导别人, 这罪过就太大了…..
dojo跟jQuery相比, 不同的地方也不少. 直接看下边代码吧, 来的清晰点.

IBM维护的一个Dojo中文博客: 《Dojo中文博客》

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/**
 ** 基本的DOM操作只是用到了dojo的核心文件.
 ** 使用dojo.query将返回一个匹配到的节点数组-dojo.Nodelist, 这个数组内建了一些常用的方法. 可以操作DOM
 **/
 
/*---------------使用dojo的方法--------------*/
dojo.ready(function(){
	//一坨一坨的代码.
});
 
/*---------------获取元素节点--------------*/
	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个可用取值(以下内容如果引起身体不适.. 请自觉服用抗呕吐药物, 如:维生素B6):
	//	    1. [null] 新创建的元素将作为refNode的子元素, 且添加到refNode中最后的位置
	//	    2. [before] 新创建的元素将作为refNode的同辈元素, 且位于refNode的前边
	//	    3. [after] 新创建的元素将作为refNode的同辈元素, 且位于refNode的后边
	//	    4. [only] 新创建的元素将取代父元素内所有子元素, 添加到refNode内部
	//	    5. [replace] 新创建的元素将直接替换点父元素
	//	    6. [first] 新创建的元素将作为refNode的子元素, 并添加到所有子元素的最前边
	//	    7. [last] 新创建的元素将作为refNode的子元素, 并添加到所有子元素的最后边
 
/*---------------操作节点的一些方法--------------*/
	//建议不要尝试给dojo.byId()获取的元素使用链式写法.. 会囧的..
	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);

基本操作就写这么多了. 操作一下还是印象更深刻点. 共勉.共勉.
引入NodeList-manipulate模块之后的DOM操作参见另一篇《dojo DOM操作(NodeList-manipulate)》

Tags:
Posted in dojo by ADD~``

Follow comments via the RSS Feed | 留下评论 | Trackback URL

Leave a comment
6 Comments.
  1. 不懂技术的大白路过. :twisted:

  2. 还在用jquery的飘过。。。

    • 公司要求. jquery相比起来, 写法会简洁很多. 但是dojo.. 可以算的上是最强大的一个库了吧.


[ Ctrl + Enter ]

 
  |  新浪微博  @不逊的螃蟹 |  Copyright © 2012 web-Add~'' <现役且越发不逊的螃蟹> | Powered by WordPress | Theme designed by Evlos [小邪]
要时刻保持心情愉悦.| 生活在利益驱动的社会里, 绝对不可以丢掉自己的梦想 | 今天(2011.4.27)在微博和Q上扬言封号. 封一段时间吧. 那是个容易让时间流逝的地方.