DOJO js 基本dom操作

阅读更多

/**
 ** 基本的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);