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