dojo.byId、dojo.query、dojo.attr

概述：

dojo.byId（/*string*/id或/*DomNode*/node）

1.传入DOMNode返回传入的domNode;

2.传入id返回id为当前值的domNode

dojo.query（/*string*/selector,/*string*?/id||/*DOMNode*?/node）

1.返回NodeList集合；

2.第一个参数为 CSS selector string ；CSS3选择器：http://www.w3school.com.cn/cssref/css_selectors.asp

3.第二个参数为可选参数，如果不选，则在整篇文档查询；

选择，则在选择节点的子节点中查询。

参考：

http://dojotoolkit.org/reference-guide/1.9/dojo/query.html

http://www.ibm.com/developerworks/cn/web/1009_moying_dojoquery/

dojo.attr

1.dojo.attr(node, attr); // get

2.dojo.attr(node, attr, value); // set

node

id or reference of the DOM node to get/set style for

attr

the attribute property name or an object with key/value pairs suitable for setting each property.

value

If passed, sets value on the node for an attribute, handling cross-browser concerns.

实例见： http://dojotoolkit.org/reference-guide/1.7/dojo/attr.html

//如果节点中有特定的属性，那么返回true

dojo.hasAttr(/*DOMNode|String*/node,/*String*/name)

//从节点中移除一个属性

dojo.removeAttr(/*DOMNode|String*/node,/*String*/name)

 

1.dojo.byId实例

// fetch a node by id="someNode"

var node = dojo.byId("someNode");

dojo.ready(function(){ var n = dojo.byId("someId"); n.innerHTML = "Hi, World"; });

2.dojo.query实例

1.CSS选择器（以下例子都是全局查询）

//by Id

dojo.query("#someId");



// by class

dojo.query(".someClass");



// by attributes

dojo.query("[name^='link']");



// by tag type

dojo.query("div");



// first-children

dojo.query("ul > li");



// odd table rows:

dojo.query("table tr:nth-child(odd)");



// scoped to some other node as parent

dojo.query("a.link", "someNode");


dojo.query("div.someClassName");//查询DIV下所有类名为“someClassName”的元素

dojo.query("h1,h2,h3");//查询出所有的 h1，h2，h3 节点

dojo.query("p:first-child");//查询任意节点下的首个 p 子元素

2.相对查询。

//除了查询表达式外，我们需要传入另一个参数，用以指示查询起始的根节点。

//该参数可以是一个字符串，Dojo Query 会将其视作元素的 id 值；或者我们也可以传入一个 DOM 节点。

dojo.query(".test", "left");//查询id为left下所有类名为test的节点

3.对查询结果的后续处理

eg1:NodeList基本操作

//NodeList.length属性

var l = dojo.query(".thinger"); 

 console.log("Size of items with class thinger:"+l.length); 

 //NodeList 中加入对象push

 l.push(dojo.create('div', { innerHTML:'hi' })); 

 console.log("Size of items with class thinger:" + l.length); 

 l.push(dojo.byId("foo")); 

 console.log("Size of items with class thinger:" + l.length); 

 // 查询 id 为 foo 的元素在 NodeList 中的位置indexOf

 console.log( l.indexOf(dojo.byId("foo")) ); 

 // 获取第四个元素

 var node = l[3]; 

 // 通过 at 方法，一次找出第二和第四个元素，返回结果也是一个 NodeList。

 var newList = l.at(1, 3);

eg2：NodeList.forEach 方法

 dojo.query("div").forEach(function(node, index, array){ 

    node.innerHTML = "new version content!"; 

 });

eg3:NodeList.style 方法

 var borders = dojo.query(".thinger").style("border"); 

 // 设置新值

 dojo.query(".thinger").style("border", "1px solid black"); 

 // 删除，添加 class 

 dojo.query(".thinger").style({border :" 3px solid red" }).removeClass("thinger"). 

 addClass("thinger2");

eg4:NodeList.connect 方法

 dojo.query("input").connect("onclick", function(e){ 

  alert("new event!"); 

 });

eg5:NodeList.onclick 方法

 dojo.query("input").onclick(function(e){ 

  alert("new event!"); 

 });
//直接支持的事件还包括 onclick, onmouseenter, onmouseleave, onmouseover, omouseout, ondblclick 等

eg6:NodeList 的鼠标事件

 dojo.query("p").onmouseenter(function(e){ 

    dojo.style(e.target, "color", "red"); 

 }).onmouseleave(function(e){ 

    dojo.style(e.target, "color", "blue"); 

 });

eg7:扩展 NodeList 方法

 dojo.extend(dojo.NodeList, { 

  setColor: function(newColor){ 

     this.style({ 

       color: newColor 

     }); 

     return this; 

  } 

 }); 

 dojo.query("p").setColor ("yellow");

eg8：链式调用

require(["dojo/query", "dojo/NodeList-dom"], function(query){

  query("li").forEach(function(node){

    node.innerHTML = "Something";

  }).style("color", "red")

    .style("fontSize", "12px");

});

3.dojo.attr实例

require(["dojo"], function(dojo){ // get node title dojo.attr(node, "title"); // set node title dojo.attr(node, "title", "my title"); });

//设置样式

changeStyle = function(){

 dojo.attr("testNodeThree", "style", {padding: "5px", border: "1px solid #ccc", background: "#eee"}); }