dojo/query
这个 dojo/query 模块相信读者们也是非常熟悉了，它主要是基于 CSS 的 Selector 来定位并返回相应节点。其实它使用起来非常简单，本小节我们会重点它的一些不太为人知的特殊功能。
先来看一个基本使用方式的示例：
清单 46. dojo/query 简单示例
require(["dojo/query", "dojo/dom"], function(query, dom){ var nl = query(".someClass", "someId"); // 或者 var node = dom.byId("someId"); nl = query(".someClass", node); });
其主要参数其实很简单，第一个是 Selector 的内容，第二个是根节点的 ID 或者节点对象。这里我们就是查找节点 ID 为“someId”的节点的所有子节点中，包含 someClass 的 Class 属性的所有节点。dojo/query 返回值（这里是 nl）其实是一个 dojo/NodeList 对象，不是我们通常认为的数组对象。当然，它支持数组对象支持的下标运算符“[]”，但是它还包括很多额外的方法，如：concat，forEach，map，on，last">IndexOf 等等。所以要注意，我们不能简单的把它当成数组对象来对待。
同样，还有 dojo/NodeList-data，dojo/NodeList-dom，dojo/NodeList-fx，dojo/NodeList-html，dojo/NodeList-traverse 等等对象，它们扩展了 dojo/NodeList，实现了一些新的功能，如 dojo/NodeList-dom 在 dojo/NodeList 基础上扩展了一些 DOM 操作的接口，让我们可以很方便的批量执行一些 DOM 操作。dojo/NodeList-fx 扩展了一些动画接口，可以批量执行动画。这些接口相信很多读者之前就已经接触过了，这里不再深入，在希望未接触过的读者能注意一下，这些模块对于我们使用 dojo/query 非常有帮助。
再来看一些稍微复杂一点的示例：
清单 47. dojo/query 复杂示例
dojo.query('#t span.foo:not(span:first-child)'), dojo.query('#t span.foo:not(:first-child)') dojo.query('#t h3:nth-child(odd)'), dojo.query('#t h3:nth-child(2n+1)') dojo.query('#t2 > input[type=checkbox]:checked')
前两个例子会返回 ID 为“t”的节点下面，所有的不是其上层节点的第一个子节点的，并且 Class 属性为“foo”或者包含“foo”的所有 span 节点。
后两个例子会返回 ID 为“t”的节点下面，所有为其上层节点的奇数子节点的 h3
节点。
最后一个例子会返回 ID 为“t2”的节点下面，所有被选中的 checkbox 节点。
dojo/query 支持所有的 CSS3 的 Selector，感兴趣的读者可以参考一下 W3C 的关于 CSS3 的标准的定义，其中定义的所有 Selector 均可以用在 dojo/query 中。
既然我们是基于 CSS 的 Selector 来定位并返回节点的，那我们到底是基于哪个版本的 CSS 的 Selector 算法呢？事实上，dojo/query 支持四种 Selector 模式：CSS2，CSS2.1，CSS3，ACME。相比前三个大家都很熟悉了，第四个 ACME 其实是 CSS3 的进阶，除了支持所有 CSS3 的 Selector 外，它还支持一些 Selector 引擎不支持的的检索规则。默认情况下，如果设定 async 为 false，dojo/query 会使用 ACME 模式，如果 async 为 true，则使用 CSS3。
我们可以通过 dojoConfig 来定义我们所使用的 Selector 模式，也可以在引用 dojo/query 模块的时候指定：
清单 48. dojo/query 的 Selector 模式定义
<script data-dojo-config="selectorEngine: 'css2.1', async: true" src="dojo/dojo.js"> </script> <script type="text/javascript"> var dojoConfig = { selectorEngine: "css2.1", async: true }; </script> <script src="dojo/dojo.js"> define(["dojo/query!css3"], function(query){ query(".someClass:last-child").style("color", "red"); });