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