DOJO js 基本dom操作

Posted 2022-11-19

/**
 ** 基本的DOM操作只是用到了dojo的核心文件.
 ** 使用dojo.query将返回一个匹配到的节点数组-dojo.Nodelist, 这个数组内建了一些常用的方法. 可以操作DOM
 **/
 
/*---------------使用dojo的方法--------------*/
dojo.ready(function()
  //一坨一坨的代码.
);
 
/*---------------获取元素节点--------------*/
  dojo.byId("demo"); //获取ID为demo的元素
  dojo.query("#demo"); //获取ID为demo的元素
  dojo.query(".demo"); //获取所有class为demo的元素
  dojo.query(".demo > li"); //获取class为demo的元素中, 所有直接子集li元素
  dojo.query("input[name=demo]"); //获取拥有name属性,且属性值为demo的input元素
  dojo.query(".demo", dojo.byId("p_demo")); //从id为p_demo的元素中获取所有class为demo的元素
 
/*---------------创建元素节点--------------*/
  dojo.create("li", 
    id:"demo",
    className:"deLeGemo",
    innerhtml:"create node",
    style:
      "color":"red",
      "fontWeight":"bold"
    
  , refNode, "before");
 
  dojo.create(str, attrs, refNode, pos);
  //  pos有7个可用取值(以下内容如果引起身体不适.. 请自觉服用抗呕吐药物, 如:维生素B6)：
  //      1. [null] 新创建的元素将作为refNode的子元素, 且添加到refNode中最后的位置
  //      2. [before] 新创建的元素将作为refNode的同辈元素, 且位于refNode的前边
  //      3. [after] 新创建的元素将作为refNode的同辈元素, 且位于refNode的后边
  //      4. [only] 新创建的元素将取代父元素内所有子元素, 添加到refNode内部
  //      5. [replace] 新创建的元素将直接替换点父元素
  //      6. [first] 新创建的元素将作为refNode的子元素, 并添加到所有子元素的最前边
  //      7. [last] 新创建的元素将作为refNode的子元素, 并添加到所有子元素的最后边
 
/*---------------操作节点的一些方法--------------*/
  //建议不要尝试给dojo.byId()获取的元素使用链式写法.. 会囧的..
  dojo.query(".demo").style("color","red").removeClass("fontStyle").addClass("layoutStyle");
  dojo.query(".demo").style(color:"red",fontWeight:"bold").removeClass("fontStyle").addClass("layoutStyle");
 
  var node = dojo.byId("node");
  dojo.addClass(node, "className");
 
  //删除节点的所有子节点(简单描述: 清空节点) | 删除节点及其所有自己点(简单描述: 删除节点)
  var node = dojo.byId("node");
  dojo.empty(node);
  dojo.destroy(node);
 
  //移动节点(将"node"节点, 移动到"refNode"节点的"pos"位置)
  //pos的参数类似上边创建节点(dojo.create)部分(未验证).
  var node = dojo.byId("node");
  var refNode = dojo.byId("refNode");
  dojo.place(node, refNode, pos);