dojo DOM

dojo/dom-construct

1、create(tag, attrs, refNode, pos)：创建节点

参数：

• tag：DOM节点|字符串（例如: "div", "a", "p", "li", "script", "br"），建立节点时，会以refNode作为父节点。如果refNode为null或并未指定，则默认以dojo.doc作为父节点。
  
• attrs：可选，对象类型。包含了对DOM节点设置的属性。attrs参数可以null，也可以不指定，即“不设置任何属性”。如果想要设置之后的属性，则应该为其显示的指定null值。
  
• refNode：可选，DOM节点|字符串（节点ID）.作为创建节点的父节点或者兄弟节点对象。
  
• pos：可选，字符串。一个插入点标志字符串，由此决定是将第三个参数做为父节点附加到其内部，或是做为同级节点插入。默认为"last"表示附加到父节点最后。"first"表示附加到父节点最前，"before"表示插入到同级节点前，"after"表示插入到同级节点后.“only” 表示为父节点的唯一子节点.

require(["dojo/_base/array","dojo/dom-construct"], function(array,domConstruct) {  dojo.addOnLoad(function() {    //创建一个div    var n = domConstruct.create("div");    //创建有内容的div    var n = domConstruct.create("div", {      innerHTML: " <p>hi</p>"    });    //创建一个没有属性的div放入到body标签中    var n = domConstruct.create("div", null, dojo.body());    //创建一个url，放入到id为somId的第一个节点。    var ul = domConstruct.create("ul", null, "someId", "first");    var items = ["one", "two", "three", "four"];    array.forEach(items, function(data) {      //      domConstruct.create("li", {        innerHTML: data      }, ul);    });    //创建一个有href属性的超链接，放入到页面中    domConstruct.create("a", {      href: "foo.html",      title: "Goto FOO!"    }, dojo.body());  });});

2、toDom(frag, doc)：将html标签字符串转化成DOM节点

参数：

• frag：字符串，HTML片段。
• doc：可选，document对象。默认为：dojo.doc

require(["dojo/dom-construct"], function(domConstruct) {  dojo.addOnLoad(function() {    domConstruct.toDom("<tr><td>First!</td></tr>");  });});

3、place(node,refNode,position)：放置指定的DOM节点到指定的位置上

参数：

• node：字符串（节点ID）|DOM节点。目标节点 即需要放置的节点
  
• refNode：字符串（节点ID）|DOM节点。作为目标节点的父节点或者兄弟节点。
  
• position：可选，字符串。一个插入点标志字符串，由此决定是将第三个参数做为父节点附加到其内部，或是做为同级节点插入，可选，默认为"last"表示附加到父节点最后，"first"表示附加到父节点最前，"before"表示插入到同级节点前，"after"表示插入到同级节点后.“only” 表示为父节点的唯一子节点.

require(["dojo/dom-construct"], function(domConstruct) {  dojo.addOnLoad(function() {    //把id为"someNode"的节点放到id为"anotherNode"的节点前面    domConstruct.place("someNode", "anotherNode", "before");    //创建一个div节点, 放入到页面中的最后一个节点    domConstruct.place("<div></div>", dojo.body());    //创建一个li节点，并且放入到id为"someUl"节点中的第一个节点    domConstruct.place("<li></li>", "someUl", "first");  });});

4、empty（/*DOMNode|String*/node）：清空指定的dom节点

require(["dojo/dom-construct"], function(domConstruct) {  dojo.addOnLoad(function() {    domConstruct.empty("someId");  });});

5、destroy(/*DOMNode|String*/node)：销毁指定的dom节点

require(["dojo/dom-construct"], function(domConstruct) {dojo.addOnLoad(function() {domConstruct.destroy("someId");});});

dom-attr

1、has(/*DOMNode|String*/node,name)：判断指定的dom节点是否存在name名称的属性

<div id="someId" name="mengmeng"></div>require(["dojo/dom-attr"], function(domAttr) {dojo.addOnLoad(function() {domAttr.has("someId","name");//truedomAttr.has(dojo.byId("someId"),"label");//false});});

2、get(/*DOMNode|String*/ node, name)：获取指定dom节点的name名称的属性值

<div id="someId" name="mengmeng"></div>require(["dojo/dom-attr"], function(domAttr) {dojo.addOnLoad(function() {domAttr.get("someId","name");//mengmengdomAttr.get(dojo.byId("someId"),"label");//null});});

3、set(/*DOMNode|String*/ node, /*String|Object*/name,value )：设置指定dom节点的name名称的属性值

require(["dojo/dom-attr"], function(domAttr) {dojo.addOnLoad(function() {domAttr.set("formId", "tabIndex", 3);//设置多个属性值domAttr.set("formId", {"foo": "bar","tabIndex": -1,"method": "POST","onsubmit": function(e) {//TODO}});domAttr.set("formId", {id: "bar",style: {width: "200px",height: "100px",color: "#000"}});//只设置属性值,如果只是设置style属性值可以使用dom-stylevar obj = { color:"#fff", backgroundColor:"#000" };domAttr.set("formId", "style", obj);});});

4、remove(/*DOMNode|String*/ node,  name)：移除指定dom节点的name属性名称的

require(["dojo/dom-attr"], function(domAttr) {dojo.addOnLoad(function() {domAttr.remove("formId", "name");});});

dom-class

1、contains(/*DomNode|String*/ node, /*String*/ classStr)：判断指定的dom节点是否存在classStr名称的Class

require(["dojo/dom-class"], function(domClass) {dojo.addOnLoad(function() {if(domClass.contains("someNode", "firstClass")){//TODO}});});

2、add(/*DomNode|String*/ node, /*String|Array*/ classStr)：给指定的dom节点添加classStr名称的class

require(["dojo/query", "dojo/dom-class"], function(query, domClass) {dojo.addOnLoad(function() {domClass.add("someNode", "anewClass");//给somNode节点添加两个classdomClass.add("someNode", "firstClass secondClass");domClass.add("someNode", ["firstClass", "secondClass"]);//向所有ul节点下的li节点添加className属性"firstLevel"query("ul > li").addClass("firstLevel");});});

3、remove(/*DomNode|String*/ node, /*String|Array?*/ classStr)：给指定的dom节点移除classStr名称的class

require(["dojo/query","dojo/dom-class"], function(query,domClass) {dojo.addOnLoad(function() {domClass.remove("someNode", "firstClass");domClass.remove("someNode", "firstClass secondClass");domClass.remove("someNode", ["firstClass", "secondClass"]);//移除ID为"someNode"节点上的所有classdomClass.remove("someNode");//把所有ul节点下的li节点删除classNmae属性"foo"query("ul > li").removeClass("foo");});});

4、replace(/*DomNode|String*/ node, /*String|Array*/ classStr,/*String|Array?*/ removeClassStr)：设置dom节点用某个class取代另一class

require(["dojo/query","dojo/dom-class"], function(query,domClass) {dojo.addOnLoad(function() {//把id为"somNode"的dom节点中的"add1 add2"的className 替换为"remove1 remove2"domClass.replace("someNode", "add1 add2", "remove1 remove2");//把id为"somNode"的dom节点的所有的className替换为"addMe"domClass.replace("someNode", "addMe");//把所有符合".findMe"条件的dom节点中的"addMe"的className 替换为"removeMe"query(".findMe").replaceClass("addMe", "removeMe");});});

5、toggle(/*DomNode|String*/ node, /*String|Array*/ classStr,/*Boolean?*/ condition)：设置指定的dom节点添加或者移除某个class

require(["dojo/query","dojo/dom-class"], function(query,domClass) {dojo.addOnLoad(function() {//如果id为"somNode"的dom节点，已存在"hovered"的className则移除，反正不存在则添加"hovered"。domClass.toggle("someNode", "hovered");//给id为"somNode"的dom节点添加className属性"hovered"domClass.toggle("someNode", "hovered", true);//给所有符合".toggleMe"条件的dom节点，添加或者移除className"toggleMe"query(".toggleMe").toggleClass("toggleMe");});});

dom-Style

1、get(/*DOMNode|String*/ node, /*String?*/ name):获取指定dom节点的style属性

require(["dojo/dom-style"], function(domStyle) {dojo.addOnLoad(function() {//获取id为"thinger"dom节点的style属性domStyle.get("thinger");//获取id为"thinner"dom节点style属性中opacity属性的值domStyle.get("thinger", "opacity");});});

2、set(/*DOMNode|String*/ node, /*String|Object*/ name, /*String?*/ value):设置指定dom节点的style属性

require(["dojo/query", "dojo/dom-style"], function(query, domStyle) {dojo.addOnLoad(function() {//设置id为"thinger"dom节点style属性的值domStyle.set("thinger", {"opacity": 0.5,"border": "3px solid black","height": "300px"});//设置font-size这类属性时，去除-，-后第一个字母大写domStyle.set("thinger", {fontSize: "14pt",letterSpacing: "1.2em"});//这只id为"baz"节点下的div 标签的style 属性domStyle.set("#baz > div").style({opacity: 0.75,fontSize: "13pt"});});});