Dojo1.11官方教程文档翻译（3.2）使用dojo/query

最新推荐文章于 2017-11-08 18:40:00 发布

taijiedi13

最新推荐文章于 2017-11-08 18:40:00 发布

阅读量647

点赞数

分类专栏： Web前端文章标签： dojo dojo-query 教程 NodeList

Web前端专栏收录该内容

55 篇文章 0 订阅

订阅专栏

3.2 使用dojo/query

原文地址：https://dojotoolkit.org/documentation/tutorials/1.10/using_query/index.html
GitBook地址：https://www.gitbook.com/book/limeng1900/dojo1-11-tutorials-translation-in-chinese/details
转载请注明出处：http://blog.csdn.net/taijiedi13/ – 碎梦道

本教程中，我们将学习DOM查询和如何使用dojo/query来选择节点。

入门

在使用DOM时，快速和高效地检索节点很重要。我们已经有了dom.byId。但是，在应用中用单一的ID来查找所有的兴趣节点是不现实的。只用ID在查找和操作多节点时效率也很低。幸好，有另一种解决方案：dojo/query。dojo/query模块使用类CSS查询（你在样式表里使用的）来检索一个节点列表，它也支持高级的CSS3选择器。

查询

我们用下面的HTML来展示最常用的查询，里面主要网址链接的列表：

<ul id="list">
    <li class="odd">
        <div class="bold">
            <a class="odd">Odd</a>
        </div>
    </li>
    <li class="even">
        <div class="italic">
            <a class="even">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">Odd</a>
        </div>
    </li>
    <li class="even">
        <a class="even">Even</a>
    </li>
</ul>

<ul id="list2">
    <li class="odd">Odd</li>
</ul>

第一件要做的事是获得整个列表的处理器。跟前面一样，可以用dom.byId，但你也可以使用query。初看这个方法不是很有用，但是我们会中这个例子开始讲：

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

通过前置标识符“#”来告诉query用ID属性查找节点。这个规定和CSS相似。记住一件事：query总是返回一个数组。数组以后再细说，由于这里通过ID list只得到一个节点（也应该只有一个），就直接从数组取出这个元素。
通过ID获取节点很棒，但是并没有比dom.byId更强大。然而，query也可以通过类名来选择节点。我们打算检索只带“odd”类的节点：

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

我们通过前置“.”的标识符告诉query查找className属性中含有该标识的节点，还是和CSS一样。示例中，query将返回一个包含4个<li>和3个<a>的数组。

限制查询

你可以已经发现前面的例子中odd同时包含多个list的节点。如果只想要第一个list的odd节点，可以使用两种方式：

// 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", dom.byId("list"));

两种通过不同的方法实现：第一种使用选择器语法让query引擎限制获取的结果，第二种将query引擎的作用域限制在一个特定的DOM节点。
当query不带第二个参数执行的时候，它将搜索全部的DOM结构的全部节点。第二个参数指定为一个DOM节点时，查询被限制在该节点和其子节点中。
如果你的DOM相对较小，比如跟例子中一样，可以省略第二个参数。然而，对于有着更大DOM结构的页面，最好使用第二个参数来限制query的作用域。在指定部分执行查询比搜索全部文档要快的多。
后面的示例中，我们会省略第二个范围参数，但是你用query时要记住前面的话，保持你的检索快速简洁来提供更快的代码和更好的用户体验。

进阶部分

前面的查询结果混合了<li>和<a>节点，如果只想要<a>呢？你可以组合标签名和类名：

var oddA = query("a.odd");

代替分离的标识符，你可以组合标识符来指向更明确的节点；上面的组合类名在跨浏览器的样式表中有不同的效果，不过query能正常工作。、
query还有另一个跨浏览器的选择器“>”，但不是全部样式表都支持。它将只在第一个选择器下一级查找第二个：

// Retrieve an array of any a element that has an
// li as its ancestor.
var allA = query("li a");
// Retrieve an array of any a element that has an
// li as its direct parent.
var someA = query("li > a");

View Demo
allA将包含全部的6个<a>，someA只有2个<a>。任何选择器都可以放在“>”的两边，包括类选择器。这里我们只涉及几个常见的选择器，query是完全遵循CSS3的，并且可以接受更多选择器，你可以自己试试。

NodeList

如前面提到的，query返回一个匹配选择器的节点数组；这个数组实际上是一个dojo/NodeList，它还有操作节点的方法。前面的例子已经用了几个方法，不过我们在看一个你更可能在应用里用到的。这一系列的示例使用下面的标记：

<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>

NodeList具备相当于Dojo数组辅助方法的方法。一个是forEach，会对数组里每一个节点执行函数：

// 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");
        });

});

传递给forEach的函数是一个回调，调用给数组的每一项，参数如下：当前它所在的节点，节点的索引和迭代的NodeList。对于大部分的开发者，第三个参数可以忽略；但是在数组没有存储在变量中的实例中，第三个参数可以用来获取数组的其他项。forEach方法也接收第二个参数来指定回调调用的范围。
NodeList定义的其他数组帮助函数是map、filter、every和some。这些函数都返回一个NodeList，除了every和some返回布尔值。
NodeList还有几个拓展模块来添加额外的方法。dojo/NodeList-dom模块里是类和样式帮助方法。dojo/NodeList-dom提供对应各种DOM方法的遍历方法，这样前面的例子就可以简化成：

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

在NodeList里对每个节点执行DOM方法，并且返回一个NodeList支持链接写法：

// Remove "red" from and add "blue" to the className
// of each node matching the selector ".odd"
query(".odd").removeClass("red").addClass("blue");

dojo/NodeList-dom定义的其它DOM方法有style、toggleClass、 replaceClass、 place和empty。这些方法也都返回一个NodeList：

// 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");

View Demo

事件

NodeList提供的另一个便利的方法是on来连接DOM事件。虽然DOM事件将在下一个教程里涉及，我们会先涉及NodeList的on方法的语法。也要记住，虽然这是个方便的语法，这个方式不应该用在包含大量节点的NodeList，应该用一种叫做事件委托的技术来替代，见事件教程。

<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>