使用 dojo/query

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

入门指南

在操作DOM的过程中,如何快速高效地检索出DOM节点显得相当重要。我们在Dojo DOM Functions中已经熟悉了 dom.byId,然而,在应用程序里找出每一个感兴趣的节点的唯一ID是项繁琐且易错的工作。并且仅靠ID的方式来选择大量节点的效率可见是低下的。所以,这里介绍另一个解决方案:dojo/querydojo/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,乍一看,这种方式的作用并不明显,但我们可以从下面的例子中学到更多:

1
2
3
4
5
// 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"的节点:

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

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

限定你的查询

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

1
2
3
4
5
6
7
// 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标签时怎么做呢?你可以将标签名和样式名合并起来:

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

对比分割标识符(代表了等级关系),你可以将标识符和目标节点合并起来;这里包含样式名称,可以使用query查询

另一种选择器可以跨浏览器,但不是在所有样式里都支持,就是">",这中选择器只查询第一个选择器下的第二个选择器。举个例子:

1
2
3
4
5
6
// 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,它会为数组中的每个节点都运行一次函数。

1
2
3
4
5
6
7
8
9
10
11
// 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-domdojo/NodeList-dom提供了一些符合Dojo操作DOM的方法,所以之前的例子可以简化:

1
2
3
4
5
6
7
8
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的事件机制。

相关文章
相关标签/搜索