操作dom时，可以使用dom.byId，缺陷是需要为每一个元素指定唯一ID，是一个可怕的和不切实际的工作。另一个解决方案，采用dojo/query模块。dojo/query使用我们熟悉的css选择器 检索一系列的节点。包括对先进的CSS3 选择器的支持。
1、查询
css/demo.css文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
body {
margin
:
0
;
padding
:
2em
;
font-family
: Lucida Sans,Lucida Grande,
Arial
!important
;
font-size
:
13px
!important
;
background
:
white
;
color
:
#333
;
}
button {
background-color
:
#E4F2FF
;
background-image
:
url
(
"//dijit/themes/claro/form/images/buttonEnabled.png"
);
background-position
:
center
top
;
background-repeat
:
repeat-x
;
border
:
1px
solid
#769DC0
;
padding
:
2px
8px
4px
;
font-size
:
1em
;
}
button:hover {
background-color
:
#AFD9FF
;
color
:
#000000
;
}
.add-borders ul {
border
:
1px
solid
red
;
padding
:
2px
;
}
.add-borders li {
border
:
1px
solid
blue
;
padding
:
2px
;
}
.add-borders a {
border
:
1px
solid
black
;
padding
:
2px
;
}
.
bold
{
font-weight
:
bold
;
}
.
italic
{
font-style
:
italic
;
}
.highlight {
background-color
: yellow;
}
.
red
{
background-color
:
red
;
}
.
blue
{
background-color
:
blue
;
}
|
query.html文件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<
html
>
<
head
lang
=
"en"
>
<
meta
charset
=
"UTF-8"
>
<
title
>Using dojo/query</
title
>
<
link
rel
=
"stylesheet"
href
=
"css/demo.css"
>
<
script
src
=
"dojo/dojo.js"
data-dojo-config
=
"async: true"
></
script
>
</
head
>
<
body
>
<
button
class
=
"queryButton"
>#list</
button
>
<
button
class
=
"queryButton"
>.odd</
button
>
<
button
class
=
"queryButton"
>#list .odd</
button
>
<
button
class
=
"queryButton"
>a.odd</
button
>
<
button
class
=
"queryButton"
>li a</
button
>
<
button
class
=
"queryButton"
>li > a</
button
>
<
button
class
=
"queryButton"
>.italic > a</
button
>
<
div
class
=
"add-borders"
>
<
ul
id
=
"list"
class
=
""
>
<
li
class
=
"odd"
>
<
div
class
=
"bold"
>
<
a
class
=
"odd"
>Odd</
a
>
</
div
>
</
li
>
<
li
class
=
"even"
>
<
div
class
=
"italic"
>
<
a
class
=
"even highlight"
>Even</
a
>
</
div
>
</
li
>
<
li
class
=
"odd"
>
<
a
class
=
"odd"
>Odd</
a
>
</
li
>
<
li
class
=
"even"
>
<
div
class
=
"bold"
>
<
a
class
=
"even"
>Even</
a
>
</
div
>
</
li
>
<
li
class
=
"odd"
>
<
div
class
=
"italic"
>
<
a
class
=
"odd highlight"
>Odd</
a
>
</
div
>
</
li
>
<
li
class
=
"even"
>
<
a
class
=
"even"
>Even</
a
>
</
li
>
</
ul
>
<
ul
id
=
"list2"
>
<
li
class
=
"odd"
>Odd</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
|
事件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>
require([
"dojo/query"
,
"dojo/NodeList-dom"
,
"dojo/domReady!"
],
function
(query){
function
executeSeletor(button){
query(
".highlight"
).removeClass(
"highlight"
);
query(button.innerHTML.replace(
">"
,
">"
)).addClass(
"highlight"
);
}
query(
".queryButton"
).on(
"click"
,
function
(e){
//console.dir(e);
executeSeletor(e.target);
})
var
list = query(
"#list"
);
console.dir(list);
});
</script>
|
使用ID查询：
|
1
2
3
4
5
|
// require the query and domReady modules
require([
"dojo/query"
,
"dojo/domReady!"
],
function
(query) {
// retrieve an array of nodes with the ID "list"
var
list = query(
"#list"
)[
0
];
})
|
"#"标示符告诉query方法去查找拥有此Id属性的节点，与dom.byId功能类似。需要记住的一件事是：query 总是返回一个数组。通过ID抓取节点非常的好，但是他用起来没有 dom.byId强大，但是query允许你使用类名称来选取节点，如果我们只想检索拥有 "odd" 类名称的节点。
|
1
2
|
// retrieve an array of nodes with the class name "odd"
var
odds = query(
".odd"
);
|
使用"."标示符我们告诉query去查找拥有此类名称属性的节点，将返回一个拥有4个<li>和3个<a>的数组。
2、限制你的查询
|
1
2
3
4
5
6
7
|
// retrieve an array of nodes with the class name "odd"
// from the first list using a selector
var
odds1 = query(
"#list .odd"
);
// retrieve an array of nodes with the class name "odd"
// from the first list using a DOM node
var
odds2 = query(
".odd"
, document.getElementById(
"list"
));
|
使用两种方法，最终效果是一样的。第一种方法是通过选择器格式通过查询引擎从整个的dom 中限定，第二种是对查询上下文限定到一个特定的DOM上。
在方法二中，当query不使用第二个参数执行时，他将在整个DOM结构中查找，查询<html>标签下的每个有效的节点。当一个DOM节点被指定为第二个参数，将限定query到此节点及其子节点上。如果你的DOM相当的小省略第二个参数是可接受的，如果一个页面很大的DOM结构，使用第二个参数限定你 的查询将更好，通过具体的节点范围询将比在整个文档中查询更加的高效，能提供更好的用户体验。
3、更高级的选择
前面的查询包含了<li>和<a>标签，如果我们只想查询<a>标签要怎么办呢，你可以将一个标签名字和一个类名字合并：
|
1
|
var
oddA = query(
"a.odd"
);
|
选择li下所有a元素：
|
1
2
3
|
// Retrieve an array of any a element that has an
// li as its ancestor.
var
allA = query(
"li a"
);
|
选择li下第一个子元素为a的所有a元素：
|
1
2
3
|
// Retrieve an array of any a element that has an
// li as its direct parent.
var
someA = query(
"li > a"
);
|
4、节点列表
前面提到query返回符合选择器的一个节点数组，这是一个特殊的数组叫做dojo/NodeList。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<
html
>
<
head
lang
=
"en"
>
<
meta
charset
=
"UTF-8"
>
<
title
>Using dojo/query</
title
>
<
link
rel
=
"stylesheet"
href
=
"css/demo.css"
>
<
script
src
=
"dojo/dojo.js"
data-dojo-config
=
"async: true"
></
script
>
<
script
>
// Wait for the DOM to be ready before working with it
require(["dojo/query", "dojo/dom-class", "dojo/domReady!"],
function (query, domClass) {
query(".odd").forEach(function (node, index, nodelist) {
// for each node in the array returned by query,
// execute the following code
domClass.add(node, "red");
});
});
</
script
>
</
head
>
<
body
>
<
div
id
=
"list"
>
<
div
class
=
"odd"
>One</
div
>
<
div
class
=
"even"
>Two</
div
>
<
div
class
=
"odd"
>Three</
div
>
<
div
class
=
"even"
>Four</
div
>
<
div
class
=
"odd"
>Five</
div
>
<
div
class
=
"even"
>Six</
div
>
</
div
>
</
body
>
</
html
>
|
传递给foreach的函数是一个回调函数，被数组中的每个条目所调用，该回调函数包含三个参数：当前的节点，节点的索引，需要迭代的节点列表。
对大多数开发者，第三个参数可以忽略。如果数组未被保存在一个容易访问的变量中，使用第三个参数访问数组中的其他元素很有用的。
dojo/NodeList-dom 提供便利的方法来搭配dojo中的各种dom方法，上面的示例等效于：
|
1
2
3
4
5
6
7
8
9
10
|
<script>
require([
"dojo/query"
,
"dojo/NodeList-dom"
,
"dojo/domReady!"
],
function
(query) {
// Add "red" to the className of each node matching
// the selector ".odd"
query(
".odd"
).addClass(
"red"
);
// Add "blue" to the className of each node matching
// the selector ".even"
//query(".even").addClass("blue");
});
</script>
|
支持链式访问：
样例一：
|
1
2
3
|
// Remove "red" from and add "blue" to the className
// of each node matching the selector ".odd"
query(
".odd"
).removeClass(
"red"
).addClass(
"blue"
);
|
样例二：
|
1
2
3
|
// Change the font color to "white" and add "italic" to
// the className of each node matching the selector ".even"
query(
".even"
).style(
"color"
,
"white"
).addClass(
"italic"
);
|
5、事件
节点列表提供的另一个便利方法是：on 连接到DOM 事件。需要注意的是 虽然这是一个 便利的格式，但是这种方法不应该应用在一个包含大量的节点的一个节点列表上，在这种情况下我们将使用事件委托。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<button class=
"hookUp demoBtn"
>Click Me!</button>
<button class=
"hookUp demoBtn"
>Click Me!</button>
<button class=
"hookUp demoBtn"
>Click Me!</button>
<button class=
"hookUp demoBtn"
>Click Me!</button>
<script>
// Wait for the DOM to be ready before working with it
require([
"dojo/query"
,
"dojo/domReady!"
],
function
(query) {
query(
".hookUp"
).on(
"click"
,
function
(){
alert(
"This button is hooked up!"
);
});
});
</script>
|
本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1398787，如需转载请自行联系原作者
