（6）Dojo学习之DOM操作

1.引言

      在JavaScript中不可避免的要和DOM元素打交道，在本篇博客中就来看一看Dojo封装好的DOM操作模块，其中主要有:

• dojo/dom模块
• dojo/dom-construct模块
• dojo/dom-attr模块
• dojo/dom-prop模块
• dojo/dom-class模块
• dojo/dom-style模块
• dojo/dom-form 模块

接下来我们就来看一看这些模块的用法，如何使用这些模块操作我们的DOM节点。

2. Dojo模块操作DOM

2.1 dojo/dom操作DOM结点

      关于dojo/dom模块的使用，主要是用于获取dom结点，在该模块中最常用的一个方法便是dom.byId()方法，使用该方法可以获得html中的DOM元素，在低版本之前没有dojo/dom模块，老版本中使用dojo.byId()方法获得dom结点，但是随着版本的提示dojo.byId()已经逐渐被淘汰了。

      现在我们来看一下dojo/dom模块的简单用法。

• 首先我们创建一个button和一个div.（我们点击按钮的时候，修改div的内容）

       <button id="btn">修改div的内容</button>
       <div id="myDiv"></div>

• 然后我们使用dojo/on给按钮绑定事件，然后通过dom.byId获得dom元素，从未修改div的内容

require(["dojo/dom","dojo/on","dojo/domReady!"],
                        function(dom,on) {

                        on(dom.byId("btn"),"click", function () {
                            dom.byId("myDiv").innerHTML="div的内容被修改了";

                        })

                });

• 运行结果

2.2 dojo/dom-construct操作DOM结点

      在dojo/dom-construct模块中主要有四种常用的方法：create，destroy，empty，place.其中create主要用于创建DOM节点，destroy主要用于销毁节点，empty用于将某一个节点的子节点清空，place主要用于将DOM结点插入到指定位置。

2.2.1使用create方法操DOM

• 使用create创建DOM元素,其中create(tag,attrs,refNode,pos)方法有四个参数。第一个参数（必需参数）：标签的种类。第二个参数（必需参数）：标签的属性。第三个参数（可选参数）：一个DOM引用。第四个参数（可选参数）：相对于第三个DOM引用参数所处的位置，默认为last,还可以填写first,after,before,last,replace,only。接下来我们用一个例子来说明这个方法的使用

• 创建一个DOM列表

    <ul id="list">
            <li id="Two">Two</li>
            <li id="Three">Three</li>
            <li id="Four">Four</li>
            <li id="Five">Five</li>
            <li id="Six">Six</li>
        </ul>

• 利用create(tag,attrs,refNode,pos)方法插入一个DOM结点

require(["dojo/dom","dojo/dom-construct","dojo/domReady!"],
                        function(dom,domConstruct) {
                            //获得list节点
                            var list = dom.byId("list");
                            //创建一个li标签，然后标签innerHtml属性为one
                            //然后将创建的li结点插入到list标签的头部
                            domConstruct.create("li", {
                                innerHTML: "one"
                            }, list,"first");


                });

2.2.2 使用destroy(node)方法销毁一个结点

• 创建我们的DOM元素

    <ul id="list">
            <li id="Two">Two</li>
            <li id="Three">Three</li>
            <li id="Four">Four</li>
            <li id="Five">Five</li>
            <li id="Six">Six</li>
        </ul>

• 使用destroy方法销毁节点

 require(["dojo/dom","dojo/dom-construct","dojo/domReady!"],
                        function(dom,domConstruct) {
                            //获得list节点
                            var list = dom.byId("list");
                            //删除list节点
                            domConstruct.destroy(list);


                });

• 运行结果（注意body标签里面没有ul标签了，注意和empty方法的区别）

2.2.3 使用empty清空节点

• DOM节点

    <ul id="list">
            <li id="Two">Two</li>
            <li id="Three">Three</li>
            <li id="Four">Four</li>
            <li id="Five">Five</li>
            <li id="Six">Six</li>
        </ul>

• 清空节点

require(["dojo/dom","dojo/dom-construct","dojo/domReady!"],
                        function(dom,domConstruct) {
                            //获得list节点
                            var list = dom.byId("list");
                            //删除list节点
                            domConstruct.empty(list);


                });

• 运行结果（注意：body里面是由ul标签的，注意和destroy方法的区别）

2.2.4使用place方法插入一个节点

• 首先我们看一下这个方法的参数place(node,refNode,position),前两个参数是DOM结点的引用，第三个参数是一个相对位置，如果大家熟悉create,第三个参数和create方法中的第四个参数是类似的。接下来我们用代码来感受一下：

• DOM节点

       <ul id="list">
            <li id="Two">Two</li>
            <li id="Three">Three</li>
            <li id="Four">Four</li>
            <li id="Five">Five</li>
            <li id="Six">Six</li>
        </ul>

• 使用place插入节点（感受一下和create方法的区别）

require(["dojo/dom","dojo/dom-construct","dojo/domReady!"],
                        function(dom,domConstruct) {
                            //获得list节点
                            var list = dom.byId("list");
                            //创建一个节点
                            var li=domConstruct.create("li", {
                                innerHTML: "one"
                            });
                            //将li节点插入的list中
                            domConstruct.place(li,list,"first");


                });

2.3 dojo/dom-prop操作DOM节点

      关于dojo/dom-prop模块的使用非常简单，就只有两个方法get, set方法，这两个方法一个是设置dom的属性一个是取得dom的属性，接下来用一个例子来看一下这个模块的使用。

• 创建html标签（修改之前标签显示aaa）

<input id="txt1" type="text" value="aaa">
<input id="txt2" type="text" value="aaa">

• js代码

require(["dojo/dom","dojo/dom-prop","dojo/domReady!"],
                        function(dom,domProp) {
                            //获得txt1节点
                            var txt1 = dom.byId("txt1");
                            //获得txt2节点
                            var txt2 = dom.byId("txt2");
                            //获得txt1属性
                            var txt1value=domProp.get(txt1,"value");
                            //弹出属性
                            alert(txt1value)
                            //修改txt2属性的属性值
                            domProp.set(txt2,"value","bbb");


                });

• 运行结果

2.4 dojo/dom-form模块操作表单

使用该模块可以将表单里面的内容序列话为JSON对象

• 创建一个表单

        <form id="form">
            <input name="txt1" type="text" value="txt1">
            <input name="txt2" type="text" value="txt2">
            <input name="txt3" type="text" value="txt3">
            <input name="txt4" type="text" value="txt4">
            <input id="btn" type="button" value="序列化为json对象">
        </form>

• 点击按钮序列话为json对象

require(["dojo/dom","dojo/dom-form","dojo/on","dojo/domReady!"],
                        function(dom,domForm,on) {
                            on(dom.byId("btn"),"click", function () {
                                var json=domForm.toJson(dom.byId("form"))
                                alert(json.toString());
                            })
                });

• 运行结果

2.5 剩余的模块操作DOM元素

前面介绍了四种模块，这四种模块都可以操纵DOM元素，还剩下三种模块，即：dojo/dom-attr,dojo/dom-class,dojo/dom-style这三种模块的使用和前四种模块的使用都大同小异，我就简单的介绍一下这三种模块都可以实现什么样子的效果。

2.5.1 dojo/dom-attr模块的使用

• get(node,name)：用户获得node元素的属性值
• has(node,name)：判断node元素是否有某种属性
• remove(node,name)：删除node元素的某种属性
• set(node,name,value)：设置node元素属性值（注意这里是属性值）
• getNodeProp(node,name)：获得node元素的属性，这里注意，可以获得一个json类型的属性，比如class属性

2.5.2 dojo/dom-class模块的使用

dojo/dom-class 模块主要是判断DOM元素的class属性。该模块有以下的方法。

• add(node,classStr)：给node节点添加一个样式
• contains(node,classStr)：判断node节点是否有某种样式
• remove(node,classStr)：移除node节点中的某种样式
• replace(node,addClassStr,removeClassStr)：替换node节点中的样式
• toggle(node,classStr,condition)交替的改变node的样式

2.5.3 dojo/dom-style模块的使用

该模块主要是获得DOM节点的style属性，该模块主要有一下的方法

• get(node,name):获得node节点的属性值
• getComputedStyle(node):获得node节点style属性值：注意这里是一个json对象

3.总结

      在本篇博客中主要介绍了dojo中如何去操作DOM节点，然后又介绍了几种关于DOM节点模块。在本博客中，关于选择DOM节点只是介绍了dom.byId方法，dom.byId方法只能通过DOM的id属性选择DOM元素。这是远远不够的，在真实的需求中，这个方法的功能还不是很强大，在下一篇博客中将会介绍dojo中的样式选择器，也就是dojo/query模块，使用该模块我们可以实现更加强大的功能，选择DOM元素时也将更加的方便。