Dojo中DOM增删改查

获取dom元素

　　要操作DOM首先要获取要操作的元素，可以通过dojo/dom模块的byId方法或者dojo/query的query方法。比如：

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

 

创建dom元素

 

　　在Dojo中创建元素使用dojo/dom-construct模块的create方法。

　　该方法有四个参数，第一个参数为节点名，用string表示，第二个参数为结点属性，用object表示，第三个参数可选，为父结点或兄弟结点，第四个参数可选，为要添加的位置，默认为last。最后该方法会返回这个新的DOM元素结点。比如：

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

 

放置dom元素

　　如果你已经有一个结点然后想要放置这个结点，你会需要用到dojo/dom-construct模块的place方法。

　　该方法有三个参数，第一个参数为要放置的这个结点或结点ID值，第二个参数为待参照的结点或结点ID值，第三个参数可选，为放置的位置，默认为last。比如：

<button id="moveFirst">The first item</button>
<button id="moveBeforeTwo">Before Two</button>
<button id="moveAfterFour">After Four</button>
<button id="moveLast">The last item</button>
    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);
            }
     
            // Connect the buttons
            on(dom.byId("moveFirst"), "click", moveFirst);
            on(dom.byId("moveBeforeTwo"), "click", moveBeforeTwo);
            on(dom.byId("moveAfterFour"), "click", moveAfterFour);
            on(dom.byId("moveLast"), "click", moveLast); 
    });

 

移除dom元素

　　有两种方法可以移除DOM中的结点，一种为dojo/dom-construct模块的destroy方法，它可以移除该结点和所有其孩子结点，另一种为dojo/dom-construct模块的empty方法，它只是移除给定结点所有孩子结点。这两个方法的参数都只有一个，为结点或结点ID值。比如：

<button id="destroyFirst">Destroy the first list item</button>
<button id="destroyAll">Destroy all list items</button>

function destroyFirst(){
    var list = dom.byId("list"),
        items = list.getElementsByTagName("li");
 
    if(items.length){
        domConstruct.destroy(items[0]);
    }
}
function destroyAll(){
    domConstruct.empty("list");
}
 
// Connect buttons to destroy elements
on(dom.byId("destroyFirst"), "click", destroyFirst);
on(dom.byId("destroyAll"), "click", destroyAll);