在本篇文章中，我們將了解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 codedomClass.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

總結

以上是生活随笔為你收集整理的使用 dojo/query的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。