使用 dojo/query

在本篇文章中，我们将了解DOM的查询以及如何运用dojo/query这个模块来轻松地选择节点并操作他们。

入门指南

在操作DOM的过程中，如何快速高效地检索出DOM节点显得相当重要。我们在Dojo DOM Functions中已经熟悉了 dom.byId，然而，在应用程序里找出每一个感兴趣的节点的唯一ID是项繁琐且易错的工作。并且仅靠ID的方式来选择大量节点的效率可见是低下的。所以，这里介绍另一个解决方案：dojo/query。dojo/query模块使用类似CSS查询方式（你常在样式表里使用的方式）来检索一列节点，模块也支持高级的CSS3选择器！

查询

为了举例说明一些最常用的查询，我们将用到下面的HTML，如果在你的网站里用到一列的链接，那么你可能会使用到下面的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 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属性的节点集。这种匹配习惯和CSS相似。需要注意的是： query始终返回数组对象。在后面我们将进一步了解这种数组，但是我们知道，只有一个（也只能有一个）节点的ID为"list"，我们将他从数组中取出。

根据ID获取节点是不错的一个方式，但使用 dom.byId的效率将更好。但query允许你通过css样式名来选择节点。例如我们想获取那些样式为"odd"的节点：

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

通过在标识符前面加上 "."，我们告诉query去查找那些样式名包含标识符的节点。再次说明，这个样式表匹配相似。在上面的例子中，query将会返回一个包含4个li节点和3个a节点。

限定你的查询

你可能已经注意到上一个例子中的odds查找出的结果中包含了两个列表中的节点。如果我们只想获取第一个列表中的odds节点，我们有两种方式：

// 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相对比较小，就像例子中的，省略第二个参数是可行的。但当页面中的DOM结构相当大是，最好加入第二个参数来限制查询范围。这样做比在整个文档中查找得更快。

剩下的例子中，我们将省略第二个参数，但在使用query的时候请注意--保持你的代码运行得更快和更好的用户体验。

高级查询

我们前面的查询结果中混合了li标签和a标签，但如果我们只关心a标签时怎么做呢？你可以将标签名和样式名合并起来：

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

对比分割标识符（代表了等级关系），你可以将标识符和目标节点合并起来；这里包含样式名称，可以使用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");

查看Demo

allA包含6个a标签而someA将只包含2个a标签，任何一个选择器都可以在">"的右边，包括CSS选择器。我们现在只涉及到了一些常用选择器，query完全支持CSS3并且兼容你自己可能会遇到的其他选择器

节点集合

我们之前提到过,query返回一个符合选择器的节点数组；这个数组就是 dojo/NodeList并且数组包含可以和节点交互的方法。上一个例子就用到了几个方法，现在让我们看看一些你很可能在你程序里用到的方法。为了辅助例子，我们需要以下的HTML：

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

dojo/NodeList拥有一些和Dojo array helper相似的方法。例如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，通常叫做回调函数，数组中的每个元素都会调用这个函数，并且带入下面的参数：node代表当前节点，index代表节点的索引，NodeList则代表这个数组。对于大部分开发组来说，第三个参数可以忽略；但在某些数组不太容易获取的情况下（例如本例中），第三个参数则有助于获取数组中的其他元素。forEach方法也可以接收第二个参数来制定回调函数的执行域。

其他的一些NodeList的array helper方法为：map,filter,every和some。除了every和which返回的是布尔类型外其他的方法返回的都是NodeList。

还有一些扩展模块通过增加其他的方法到NodeLists来扩展NodeLists的能力。class和style帮助方法在 dojo/NodeList-dom。 dojo/NodeList-dom提供了一些符合Dojo操作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提供的另一个快捷方法是on，用来连接DOM的事件。尽管写一篇文章将讲到DOMN事件，我们这里了解一下使用NodeList的on方法。这里需要注意的是尽管这是一个方便的方法，但尽量不要在包含大量节点的节点数组中使用这种方法；一种叫 event delegation的技术可以在那种情况下使用，这种方法将在events tutorial中讲到。

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

查看Deom

on方法为query返回的每个节点绑定事件。

总结

正如你所看到的，操作DOM的节点是相当的容易。使用query，我们可以既快速又方便地获取到那些我们想要操作的节点集。修改样式也同样也很容易。我们展示了一个绑定点击事件到节点的简单实例，在下一篇文章中，我们将深入理解Dojo的事件机制。

转载于:https://www.cnblogs.com/ruowind/p/3542530.html