dojo之dom

dojo1.7翻译 处理DOM(Dojo DOM Functions)

原文地址：http://dojotoolkit.org/documentation/tutorials/1.7/dom_functions/

难度：低

版本：1.7

 

在这个教程中，你将学到如果使用DOJO来方便的操作DOM对象。操作DOM只是DOJO的的一小部分功能，通过它，你可以高效的取值，更新，增加和删除页面元素。

 

开始

javascript是基于浏览器的，DOM则是我们想要去展现给用户所看的界面。如果我们想在页面已经被加载完成后再进行组织修改页面，则就要使 用javascript来修改DOM了。dojo的目标就是提供一种功能，能很方便的操作DOM对象，并能兼容各种浏览器，而且只使用很少量的代码就能实 现。

下面是一个我们很常看的一组页面结构

 

    
        
        
        
        
    
    
        

            
One
            
Two
            
Three
            
Four
            
Five
        
    

 

 代码中已经包含了dojo的标签，而且现在你也应该认识require这一块的意思了。在require这个块里是整个页面加载完成后将要执行的语句的地方。

 

检索

首先，为了操作它们，我们要先学习如何来取得页面的DOM对象。最简单的方法是使用dojo/dom的byId方法来取资源。当你传入一个ID值给dojo.byId时，你将会得到一个含有该ID值的DOM对象节点的返回值，如果找不到有该ID值的元素，则返回null.

 

这个功能等同于使用document.getElementById，但有两个不同处。第一，他比较短，而且能兼容不同浏览器。另一个特点是，你可 以传入一个DOM节点的ID值，也可以直接传入一个dojo对象节点。如果传入的是一个dojo对象节点，将会把那个对象立即返回，这有利于取值的方便。 看个例子。

 

// Require the DOM resource
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");
     
});

 

 运行示例

 

setText方法将会设置节点，因为使用的是dojo.byId所以，传入的参数是ID值或节点效果都是一样的。

 

创建

我们经常会去创建页面元素。dojo并不阻止你去使用docement.createElement方法来创建元素，但用这种方法创建和设置节点的属性将要写出大量的代码。dojo提供了一个兼容浏览器的新方法，使用dojo/dom-construct的创建方法。

 

domConstruct.create有以下几个参数。节点名，属性，子/父节点，放置的位置(默认是last)，返回值为创建的新的元素。看一个例子

 

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

 

 运行示例

 

一个列表中的选项被创建，设置其内容为"Six"并加入于列表中。下一步，另一个选项被创建，设置内容为"Seven"，设置className值 为"seven"，让其有了一个加粗的样式，并将其放置于列表中。最后创建一个选项，设置内容为"Three and a half"把它放置于列表的后面，并给定ID值为"three"。

 

当你使用这种方法创建元素时，相对于innerHTML来说会怎么样？如果你已经有了内容，那么使用innerHTML来设置是最快的，但是，如果你并不是马上就要设置其内容并放入到DOM中，那么就使用domConstruct.create

 

放置

如果你在页面中已经有一个节点了并想移动它，那么你就要使用domConstruct.place这个方法。这个方法的参数有：DOM节点或ID 值，要关联的DOM节点或ID值，要放置的位置，默认为last。这很像domConstruct.create方法，事实 上，domConstruct.create是使用了domConstruct.place方法。如

 

The first item
Before Two
After Four
The last item

 

 例子中定义了一个方法用来移动第三个节点

 

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

 

 运行示例

 

设置位置的参数有"before","after","replace","only","first","last"

 

删除

这里有两种方法来删除一个节点。使用domConstruct.destroy删除节点并删除其所拥有的所有子节点。domConstruct.empty将只会删除其子节点。两种方法都只接收ID值或节点对象参数。

 

Destroy the first list item
Destroy all list items

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

运行示例

 

第一个按钮将删除第一个选项，第二个按钮将删除全部的列表

 

结论

至此，我们已经学了DOM对象主要的创建，移动，读取等操作，但他们都是一次只能操作一个对象。如果你想操作多个节点，你可以使用dojo/query方法

官方教程：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下所有子节点

}

要使用query，就要引入dojo/query包。
query可以根据Dom里节点的标签名、id名、class名来检索一个或多个节点。
--------------------------------------------------------------------------------------------

    

        

            Odd

        

    

    

        

            Even

        

    

    

        Odd

    

    

        

            Even

        

    

    

        

            Odd

        

    

    

        Even

    

 

    

Odd

--------------------------------------------------------
var uls = query("ul");//检索到两个ul节点
var list = query("#list")[0];//检索到一个id为list的节点
var odds = query(".odd");//检索到七个class为odd的节点
var oddLI = query("li.odd");//检索到四个li的class为odd的节点
var allA = query("li a");//检索到六个li子节点为a的节点
var someA = query("li > a");//检索到两个li第一个子节点为a的节点
query方法中的字符串叫选择器，其规则同CSS相同，返回值为一个数组。

forEach方法用来遍历数据元素。
query(".odd").forEach(function(node, index, nodelist){

            //

        });

在forEach的callBack方法里有三个参数，
node指代当前元素，
index指代当前元素在数组中的序列号，
nodelist为query(".odd")返回的数据（可选），在某些情况下可能需要，如需要获取当前元素前一个元素时
虽然通过id只会检索到一个节点，但query只以数组的形式返回，所以通过query("#list")[0]即可直接获取。

如果需要对检索的全部元素做相同的处理，则不用通过forEach分别对每个元素进行操作，可直接对query(".odd")进行操作，如
query(".odd").addClass("red");//对所有class名为odd的元素添加class red

query(".odd").removeClass("red").addClass("blue");//对所有class名为odd的元素删除class red并添加class blue

query(".even").style("color", "white").addClass("italic");//对所有class名为even的元素修改color样式为white，并添加class italic
query(".hookUp").on("click", function(){

            alert("This button is hooked up!");

        });//对所有class名为hookUp的元素添加一个click响应事件