Dojo------DOM基础之Query

使用DOM，最重要的是快速有效的检索节点

dojo/query模块检索一个节点列表，支持CSS3的选择器

一、查询

比如以下html:

 1 <ul id="list">
 2     <li class="odd">
 3         <div class="bold">
 4             <a class="odd">Odda>
 5         div>
 6     li>
 7     <li class="even">
 8         <div class="italic">
 9             <a class="even">Evena>
10         div>
11     li>
12     <li class="odd">
13         <a class="odd">Odda>
14     li>
15     <li class="even">
16         <div class="bold">
17             <a class="even">Evena>
18         div>
19     li>
20     <li class="odd">
21         <div class="italic">
22             <a class="odd">Odda>
23         div>
24     li>
25     <li class="even">
26         <a class="even">Evena>
27     li>
28 ul>
29 
30 <ul id="list2">
31     <li class="odd">Oddli>
32 ul>

dojo代码如下：

1 // require the query, dom, and domReady modules
2 require(["dojo/query", "dojo/dom", "dojo/domReady!"], function (query, dom) {
3     // retrieve an array of nodes with the ID "list"
4     var list = query("#list")[0];
5 })

类似于css的选择器，

查询总是返回一个数组

也可以通过类名来检索节点

1 // retrieve an array of nodes with the class name "odd"
2 var odds = query(".odd");

二、限制查询

1 // retrieve an array of nodes with the class name "odd"
2 // from the first list using a selector
3 var odds1 = query("#list .odd");

在所有的dom中限制结果

1 // retrieve an array of nodes with the class name "odd"
2 // from the first list using a DOM node
3 var odds2 = query(".odd", dom.byId("list"));

在指定的dom节点中限制范围

如果没有指定第二个参数，将会搜索整个DOM结构

对于大型DOM，最好使用第二个参数限制查询

三、更高级的选择

1 var oddA = query("a.odd");
2 
3 // Retrieve an array of any a element that has an
4 // li as its ancestor.
5 var allA = query("li a");
6 // Retrieve an array of any a element that has an
7 // li as its direct parent.
8 var someA = query("li > a");

四、NodeList

查询返回的数组实际是一个dojo/NodeList

考虑如下html：

1 <div id="list">
2     <div class="odd">Onediv>
3     <div class="even">Twodiv>
4     <div class="odd">Threediv>
5     <div class="even">Fourdiv>
6     <div class="odd">Fivediv>
7     <div class="even">Sixdiv>
8 div>

dojo代码如下：

 1 // Wait for the DOM to be ready before working with it
 2 require(["dojo/query", "dojo/dom-class", "dojo/domReady!"],
 3     function(query, domClass) {
 4 
 5         query(".odd").forEach(function(node, index, nodelist){
 6             // for each node in the array returned by query,
 7             // execute the following code
 8             domClass.add(node, "red");
 9         });
10 
11 });
12 
13 
14 require(["dojo/query", "dojo/NodeList-dom", "dojo/domReady!"], function(query) {
15     // Add "red" to the className of each node matching
16     // the selector ".odd"
17     query(".odd").addClass("red");
18     // Add "blue" to the className of each node matching
19     // the selector ".even"
20     query(".even").addClass("blue");
21 });
22 
23 // Remove "red" from and add "blue" to the className
24 // of each node matching the selector ".odd"
25 query(".odd").removeClass("red").addClass("blue");
26 
27 
28 // Change the font color to "white" and add "italic" to
29 // the className of each node matching the selector ".even"
30 query(".even").style("color", "white").addClass("italic");

五、Events

考虑如下html：

1 <button class="hookUp demoBtn">Click Me!button>
2 <button class="hookUp demoBtn">Click Me!button>
3 <button class="hookUp demoBtn">Click Me!button>
4 <button class="hookUp demoBtn">Click Me!button>

dojo代码如下：

1