这个 dojo/query 模块相信读者们也是非常熟悉了，它主要是基于 CSS 的 Selector 来定位并返回相应节点。其实它使用起来非常简单，本小节我们会重点它的一些不太为人知的特殊功能。
先来看一个基本使用方式的示例：
1 require(["dojo/query", "dojo/dom"], function(query, dom){ 2 var nl = query(".someClass", "someId"); 3 // 或者 4 var node = dom.byId("someId"); 5 nl = query(".someClass", node); 6 });
其主要参数其实很简单，第一个是 Selector 的内容，第二个是根节点的 ID 或者节点对象。这里我们就是查找节点 ID 为“someId”的节点的所有子节点中，包含 someClass 的 Class 属性的所有节点。dojo/query 返回值（这里是 nl）其实是一个 dojo/NodeList 对象，不是我们通常认为的数组对象。当然，它支持数组对象支持的下标运算符“[]”，但是它还包括很多额外的方法， 如：concat，forEach，map，on，lastIndexOf 等等。所以要注意，我们不能简单的把它当成数组对象来对待。
同 样，还有 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 非常有帮助。
再来看一些稍微复杂一点的示例：
1 dojo.query('#t span.foo:not(span:first-child)'), 2 dojo.query('#t span.foo:not(:first-child)') 3 4 dojo.query('#t h3:nth-child(odd)'), 5 dojo.query('#t h3:nth-child(2n+1)') 6 7 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 模块的时候指定：
1 <script data-dojo-config="selectorEngine: 'css2.1', async: true" 2 src="dojo/dojo.js"> 3 </script> 4 5 <script type="text/javascript"> 6 var dojoConfig = { 7 selectorEngine: "css2.1", 8 async: true 9 }; 10 </script> 11 <script src="dojo/dojo.js"> 12 13 define(["dojo/query!css3"], function(query){ 14 query(".someClass:last-child").style("color", "red"); 15 });
上述示例中列举了三种方式定义 Selector 模式，读者们可以根据需要自行选择。
其实 Dojo 还包含其它的 Selector 模式，可以从如下网址下载：
sizzle: https://github.com/kriszyp/sizzle
slick: https://github.com/kriszyp/slick
安装好后，通过之前介绍的方式定义即可：
1 <script data-dojo-config="selectorEngine: 'sizzle/sizzle'" src="dojo/dojo.js"> 2 </script> 3 4 define(["dojo/query!slick/Source/slick"], function(query){ 5 query(".someClass:custom-pseudo").style("color", "red"); 6 });
由此可见，关于 Selector 的模式的定义是非常灵活的，可扩展性非常强。
原文地址:http://www.ibm.com/developerworks/cn/web/1303_zhouxiang_dojocore/#major3