Dojo dom 操作

太过爱你忘了你带给我的痛 2021-09-17 08:32 368阅读 0赞

### 前言 ###

dojo中有关dom的操作分布封装在各个特性模块中，显得比较冗杂。

### 1、获取dom元素 ###

####     1.1、按id获取 ####

**`dojo/dom`**

require(["dojo/dom","dojo/on","dojo/domReady!"],
        function(dom,on) {
    	    on(dom.byId("btn"),"click", function () {
    	         dom.byId("myDiv").innerHTML="div的内容被修改了";
    	    })
        });

**`dojo/query`**

require(["dojo/query","dojo/domReady!"],
    	function(query) {
           //注意这里是一个数组，选择id为txt的DOM元素
           query("#txt")[0].on(“click”,function(){
    	});
    })

####     1.2 通过class选择DOM ####

**`dojo/query`**

require(["dojo/query","dojo/domReady!"], 
    	function(query) {
             //选择class属性为txt的DOM元素
             query(".txt")[0]. on(“click”,function(){
    	});
    });

### 2、操作dom结构 ###

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

####     2.1使用create方法操DOM ####

**`create(tag,attrs,refNode, pos)`** 方法插入一个DOM结点

参数：  
                tag：`require` 标签的种类。  
                attrs：`option` 标签的属性  
                refNode：`option` 插入的目标标签  
                pos：`option` 相对于目标标签的位置，默认为last,还可以填写first,after,before,last,replace,only。

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使用destroy()方法销毁一个结点 ####

**`destroy(refNode)`**  
            参数：  
                refNode：`require` 删除的目标标签

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

####     2.3使用empty()方法清空节点 ####

**`empty (refNode)`**  
            参数：  
                refNode：`require`清空的目标标签

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

####     2.4使用place()方法插入一个节点 ####

**`place(node,refNode,position)`**  
            参数：  
                node：`require` 要添加的节点  
                refNode：`require` 目标节点  
                position：`option` 相对于目标标签的位置，默认为last,还可以填写first,after,before,last,replace,only。

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");
    });

####     3、操作dom属性 ####

**`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属性

####     4、操作dom类 ####

**`dojo/dom-class模块`**

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

####     5、操作dom样式 ####

**`dojo/dom-style模块`**

*  get(node,stylename):获得node节点的属性值；
 *  set(node, stylename, value);：设置DOM节点上的样式；
 *  getComputedStyle(node):获得node节点style属性值：注意这里是一个json对象。

### 参考整理 ###

[https://blog.csdn.net/shiyangxu/article/details/81433223][https_blog.csdn.net_shiyangxu_article_details_81433223]

[https_blog.csdn.net_shiyangxu_article_details_81433223]: https://blog.csdn.net/shiyangxu/article/details/81433223