dojo1.7翻译 搜索节点功能(Using dojo/query)

原文地址:http://dojotoolkit.org/documentation/tutorials/1.7/using_query/

 

在本教程中，我们将学习dojo/query模块的搜索功能。

 

开始

在操作DOM对象中，一项重要的功能就是对节点的快速有效的检索。我们可以使用dom.byId来搜索一个指定ID的节点。但对于多个节点的操作这种做法显的有点繁琐，因为你要为每个你想要操作的节点都给定唯一的ID值。幸好，有另一种解决方案，使用dojo/query，这个模块使用类似于CSS搜索方式来搜索节点的列表。

 

搜索

为了展示如果使用搜索的，我们来使用一个经常能遇到的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的节点但和dojo.byId比起来好像没什么更特殊的。但是，query是可以使用class名称来进行搜索的

 

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

 

 使用"."前缀就是让query去搜索class的值为指定值的节点集合。在上面的例子中，会返回4个<li>元素和3个<a>元素

 

通过条件搜索

你会注意到，上面的代码会搜索出DOM中所有的符合条件的节点。如果我现在只想要在第一个list中的节点，那么会有两种方法来解决。

 

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

 

 上面的两咱方法的返回值都是一样的。但是第一种方法是在搜索出的所有结果中来选出符合条件的集合。第二种方法是，只在一个范围中去搜索结果集合。

 

当query方法没有传入第二个参数时，它就会搜索整合文档来查找结果。当有第二个参数时，就会在第二个参数指定的范围内去查询结果。

 

如果你的文档很小，就像我们的例子一样，可以忽略第二个参数。但是如果你的页面有着很大的DOM结构，那么建设你使用带有第二个参数的query方法，它会更快更有效。

 

高级搜索

上面的示例中，我们搜索出了含有<li>和<a>元素的结果，但如果我们只想要<a>元素的class名为odd的结果将怎么办？使用下面的方法。

 

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

 

使用节点和class名的混合查法，这会非常的有效

还有一种搜索的方法，但是这种方法不是在所有位置的样式中都有效，就是使用">"

 

// 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 ancestor.
var someA = query("li > a");

 

 运行示例

 

6个allA将全部使用<a>元素，但someA只有2个使用<a>元素。

 

节点链

上面已经说过，使用query返回的是一个集合，这个集合又被叫做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有着一些非常有用的方法，比如有一个方法叫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有点像回调函数，每个回调的function里都有下面的几个参数。当前的节点，节点的序号，和NodeList，对于大多数开发都来说，第三个参数是可以忽略的，但有时它也会很有用。

 

还有一些对于NodeList有用的方法，如map,filter,every,some.除了every和some是返回boolean,其它每个方法都是返回一个NodeList，这方便于使用方法链。

 

在1.7版本中，把class和style的操作移动到了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

 

// 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中还有一些别的方法 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");

 

 运行示例

 

事件

NodeList还有一个便利的方法，叫on，它用于链接DOM和事件。这样就不用使用大量的代码来连接事件和节点了。事件将在后续的教程学习

 

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

 运行示例