Dojo Query 库的核心是一个 dojo.query 函数,该函数接收一个查询字符串,以及一个可选的 DOM 节点作为参数,返回一个 NodeList 对象。一方面我们可以通过 id,元素名称,属性,CSS 等及其组合设置精巧的查询字符串准确控制返回的结果,另一方面返回的 NodeList 对象提供了丰富的操作接口,对其调用的很多方法(如 addClass)都可以直接作用于所有的元素,并且支持链式调用。如下面的例子:
dojo.query("div.someClassName").style("backgroundColor","gray").forEach("item.disabled= true;");
首先在 DOM 根结点查询 class 为“someClassName”的 div 元素,对于返回的所有元素,将 style 属性“backgroundColor”设置为“gray”,然后将元素的“disabled”属性设置为“true”。
dojo.query("img"); //查询页面所有的img 标签 dojo.query("h1,h2,h3"); //查询页面所有的h1 ha2 h3 标签 dojo.query("#widget123"); //查询id 为widget123的元素 dojo.query(".offToSeeTheWij"); 查询class=offToSeeTheWij的所有元素 dojo.query("p:first-child"); //利用 first-child 来查询任意节点下的首个 p 子元素 //下列代码就是分别用来查询 name 属性的取值以“item”打头,以“item”结尾,和包含“item”字样的元素的: dojo.query("[name^=item]"); dojo.query("[name$=item]"); dojo.query("[name*=item]");
上面我们看到的有关于 Dojo Query 的例子都只接受一个参数,它们实现的是在全局范围内,即整个页面范围内,对节点进行查询。Dojo Query 还支持局部范围内的相对查询。此时,除了查询表达式外,我们需要传入另一个参数,用以指示查询起始的根节点。该参数可以是一个字符串,Dojo Query 会将其视作元素的 id 值;或者我们也可以传入一个 DOM 节点。
<html> <head> <script type="text/javascript" src="../js/dojo/dojo.js"></script> <script type="text/javascript"> dojo.addOnLoad(function() { console.debug(dojo.query("button").length); // 输出"3" console.debug(dojo.query("button", "thisForm").length); // 输出”1” }); </script> </head> <body> <button id="b1" /> <button id="b2" /> <form id="thisForm" > <button id="formB" /> </form> </body> </html>
对查询结果进行后续操作
通过以上章节的介绍,我们知道,Dojo Query 返回的结果是 NodeList 对象。NodeList 是一个扩展的 Array 对象,它提供了丰富的操作接口方法。基本而言,NodeList 提供了几乎所有操作 DOM 的方法,且简单易用;因为它本身是 Array 对象,所以它支持所有的 Dojo 对数组的操作方法;同时,它也提供了很多直接处理事件的方法。而且,NodeList 还有一个显著的优点,就是很多方法支持链式调用。所谓链式调用,是指 NodeList 的方法调用之后仍会返回当前的对象,可以通过“.”级联继续应用其他的操作,例如 :
dojo.query(".thinger ").style {border :"1px" }).removeClass("thinger").addClass("thinger2");
作为 Array 对象,NodeList 具有长度属性,而且可以通过 at,forEache,push,pop 这些方法来操纵它。需要注意的是 at,map,forEach,slice,splice,contact 等都可以进行链式调用,但是 push,pop,shift 和 unshift 则是不可以的。
forEach方法
dojo.query("div").forEach(function(node, index, array){ node.innerHTML = "new version content!"; }); // try var elementB= dojo.query("#"+inputStr).parents(".classA").first(); var elementC= dojo.query(elementB).parent(".classB").first(); function displayIcon(node,type){ dojo.query(node).children("a").children("img").forEach(function(img,index,nodeList){ dojo.attr(img,"src","images2/expanded.gif"); }