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)》
Leave a comment
6 Comments.
mark
被扔到垃圾评论了- -.. 刚扒拉出来..
不懂技术的大白路过.
其实我也是- -….
还在用jquery的飘过。。。
公司要求. jquery相比起来, 写法会简洁很多. 但是dojo.. 可以算的上是最强大的一个库了吧.