dojo 七 DOM dojo/dom

官方教程：Dojo DOM Functions
对dom的使用，需要引用包dojo/dom。
1.获取节点，dom.byId
byId中既可以传递一个字符串，也可以传递一个节点对象

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

     

    function setText(node,
text){

        node = dom.byId(node);//通过已有对象

        node.innerHTML = text;

    }

 

    var one =
dom.byId("one");//通过字符串

    setText(one, "One has been
set");

    setText("two",
"Two has been set as well");

     

});

2.创建节点，domConstruct.create，创建一个新的节点
domConstruct需要引用包dojo/dom-construct，包括4个参数。
第一个：节点名，如"li"，"a"
第二个：属性对象，可以设置需要创建节点的各个属性、样式、内容和值
第三个：一个父节点或同级节点对象，可选
第四个：一个插入点标志字符串，由此决定是将第三个参数做为父节点附加到其内部，或是做为同级节点插入，可选，默认为"last"表示附加到父节点最后，"first"表示附加到父节点最前，"before"表示插入到同级节点前，"after"表示插入到同级节点后

require(["dojo/dom",
"dojo/dom-construct",
"dojo/domReady!"],

    function(dom, domConstruct)
{

     

        var list =
dom.byId("list"),

            three =
dom.byId("three");

 

        domConstruct.create("li",
{

            innerHTML: "Six"

        }, list);

 

        domConstruct.create("li",
{

            innerHTML:
"Seven",

            className:
"seven",

            style: {

                fontWeight:
"bold"

            }

        }, list);

 

        domConstruct.create("li",
{

            innerHTML: "Three and a
half"

        }, three,
"after");

     

});

3.放置节点，domConstruct.place，改变已存在的一个节点的位置
domConstruct.place包括三个参数。
第一个：目标节点，是一个id字符串或节点对象，即需要放置的节点
第二个：关联节点，是一个id字符串或节点对象，即目标节点将附加到该父节点最前或最后，或者，插入到该同级节点前或后
第三个：一个插入点标志字符串，由此决定是将第二个参数做为父节点附加到其内部，或是做为同级节点插入其前后，可选，默认为"last"表示附加到父节点最后，"first"表示附加到父节点最前，"before"表示插入到同级节点前，"after"表示插入到同级节点后

require(["dojo/dom",
"dojo/dom-construct",
"dojo/on",
"dojo/domReady!"],

    function(dom, domConstruct,
on){

         

        function moveFirst(){

            var list =
dom.byId("list"),

                three =
dom.byId("three");

 

            domConstruct.place(three, list,
"first");

        }

 

        function
moveBeforeTwo(){

            var two =
dom.byId("two"),

                three =
dom.byId("three");

 

            domConstruct.place(three, two,
"before");

        }

 

        function
moveAfterFour(){

            var four =
dom.byId("four"),

                three =
dom.byId("three");

 

            domConstruct.place(three, four,
"after");

        }

 

        function moveLast(){

            var list =
dom.byId("list"),

                three =
dom.byId("three");

 

            domConstruct.place(three,
list);

        }        

});

4.毁灭节点，domConstruct.destroy，彻底删除一个已存在的节点及其子节点。
如果仅需清空该节点下的子节点，而保留该节点则用domConstruct.empty。
参数都是一个id字符串或节点对象。


function destroyFirst(){

    var list =
dom.byId("list"),

        items =
list.getElementsByTagName("li");

         

    if(items.length){

        domConstruct.destroy(items[0]);//删除list下第一个li子节点

    }

}

function destroyAll(){

    domConstruct.empty("list");//清空list下所有子节点

}