dojo/dom dojo/domConstruct dojo/query

dom.byId

require(["dojo/dom", "dojo/domReady!"], function(dom) {
	var one = dom.byId("one");
    function setText(node, text){
        node = dom.byId(node);
        node.innerHTML = text;
    }
    setText(one, "One has been set");
    setText("two", "Two has been set as well");
});

domConstruct.create

• parameters

  • node name,
  • properties of the node(json),
  • parent/sibling node,
  • optional position in ref to the parent/sibling node (last by default)

• example

require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"], function(dom, domConstruct) {
   var list = dom.byId("swlist");
   domConstruct.create("li", {
       innerHTML: "Seven",
       className: "seven",
       style: {
           fontWeight: "bold"
       }
   }, list);
   // or
   domConstruct.create("li", {
       innerHTML: "Three and a half"
   }, list, "after");

});

domConstruct.place

• parameters

  • node to place,
  • node as a reference,
  • optional position (last by default)

• example

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");
        // 把three place到list的第一个位置
        //  "before", "after", "replace", "only", "first", 以及 "last"
    }
    on(dom.byId("moveFirst"), "click", moveFirst);
});

domConstruct.destory domConstruct.empty

• the same as jQuery
• domConstruct.destroy which will destroy a node and all of its children
• domConstruct.empty will only destroy the children of a given node
• example

require(["dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/domReady!"], function(dom, domConstruct, on) {
    function destroyFirst(){
        var list = dom.byId("list"),
            items = list.getElementsByTagName("li");

        if(items.length){
            domConstruct.destroy(items[0]);
        }
    }
    on(dom.byId("destroyFirst"), "click", destroyFirst);
});

query from dojo/query

• query returns an array of nodes that match the selector; this array is actually a dojo/NodeList

require(["dojo/query", "dojo/dom-class", "dojo/dom", "dojo/NodeList-dom", "dojo/domReady!"], function (query, domClass, dom) {
    // retrieve an array of nodes with the class name "odd"
    // from the first list using a selector
    var odds1 = query("#list .odd");
    // retrieve an array of nodes with the class name "odd"
    // from the first list using a DOM node
    // same as above
    var odds2 = query(".odd", dom.byId("list"));
    // retrieve an array of nodes with the ID "list"
    var list = query("#list")[0];

    query(".odd").forEach(function(node, index, nodelist){
        // for each node in the array returned by query,
        // execute the following code
        domClass.add(node, "red");
    });
    // `forEach` is a function from `NodeList'
    // `map`, `filter`, `every`, and `some` (also return a NodeList fro easy chaining)
    // `dojo/NodeList-dom` extends `NodeLists`
    query(".odd").addClass("active");
    query(".odd").removeClass("active").addClass("dimmed");
    query(".even").style("color", "white").addClass("italic");
    // funtions from NodeList-dom `style`, `toggleClass`, `replaceClass`, `place`, and `empty`, `addClass`, `removeClass`
    // a `on` function is provided in `NodeList`
    query(".hookUp").on("click", function(){
        alert("This button is hooked up (via NodeList on method) !");
    });
});