Dojo dom 操作

最新推荐文章于 2019-01-08 02:05:38 发布

idomyway

最新推荐文章于 2019-01-08 02:05:38 发布

阅读量507

点赞数

CC 4.0 BY-SA版权

分类专栏： Dojo 文章标签： dojo dom style class query

本文链接：https://blog.youkuaiyun.com/idomyway/article/details/84977670

Dojo 专栏收录该内容

9 篇文章

订阅专栏

前言

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