dojo/query (part 3) NodeList-traverse

簡介

在 DOM Tree 中搜尋元件時，並非每次都需要搜尋整份 HTML 文件；有時，會希望以搜尋到的某一元件做為參考點，由此，再依和參考點的對應關係去搜尋相關的元件。NodeList-traverse 這個模組便為 dojo/query 模組擴充了這方面的功能；讓搜尋可以依參考點的父輩、同輩，子輩等等各種關係，找到對應關係的元件。這種作業方式，在撰寫或處理略為複雜的介面元件模組時特別方便有用；這樣也不需要傷神為每一個在介面中的小節點或子元件取一個用來識別的 id 屬性，或 CSS 類別，才能搜尋到該元件，只要找到介面元件中的參考元件，便能依對應關係找到介面中的其它元件。

以下列出部份的函式，用法如： query(Selector).children(filter); 其中 filter 參數為選用，可以給或不給，賦予值如同 Selector，也是使用 CSS3 選擇器的篩選條件式，用來將 qeruy 選取到的元件再做進一步的篩選。

children(filter): 取得所有選取元件的子輩元件。取得子輩時，只會取得下一層子輩。

parent(filter): 取得所有選取元件的父輩元件，取得父輩時，只會取得上一層的父輩。

parents(filter): 取得所有選取元件的父輩元件，這個函式會取得所有上層的父輩，一直到 <body> 及 <html>，通常這並非所要的結果，因此，這個函式一般都會給參數 filter，以篩選取得父輩的元件。

siblings(filter): 取得所有選取元件的同輩元件。

next(filter): 取得所有選取元件的下一個同輩元件，因為 next() 只會傳回一個元件，參數 filter 在這裡的作用，比較像指定條件，而非篩選。換句話說，這個函式會傳回同一輩中，下一個符合 filter 條件的元件。

nextAll(filter): 取得所有選取元件之後的所有同輩元件（不含選取元件本身），因為 nextAll() 通常會傳回不只一個元件，參數 filter 在這裡的作用又回到篩選。換句話說，這個函式會傳回在選取元件之後的同一輩中所有符合 filter 條件的元件。

prev(filter): 取得所有選取元件的上一個同輩元件，因為 prev() 只會傳回一個元件，參數 filter 在這裡的作用，比較像指定條件，而非篩選。換句話說，這個函式會傳回同一輩中，上一個符合 filter 條件的元件。

prevAll(filter): 取得所有選取元件之前的所有同輩元件（不含選取元件本身），因為 prevAll() 通常會傳回不只一個元件，參數 filter 在這裡的作用又回到篩選。換句話說，這個函式會傳回在選取元件之前的同一輩中所有符合 filter 條件的元件。

andSelf(): 將參考元件本身加入 NodeList 之中，例如在使用 next(), nextAll(), prev() 及 prevAll() 等函式時，如果希望 NodeList 中包含參考點的元件，就必須在函式之後鏈接 .andSelf() 函式。使用時，必須注意 .andSelf() 在鏈接時的所在位置，不然取得的結果可能會出乎意料。

範例

在範例中構建一個簡單的組織圖，用來展現如何透過 NodeList-traverse 來尋訪元件。要找到一個特定的元件，可以有無數種的尋訪方式，範例中的程式並非唯一的答案。實作時，還是八仙過海，各顯神通吧！

CSS

<style>
html {
 width:100%;
 height:100%;
}
body {
 margin:0 auto;
 width:1000px;
 height:100%;
 padding-top:20px;
}
.company {
 width:400px;
 border: 2px solid gray;
 padding:30px;
}
.sales,.engineers {
 border: 2px solid gray;
 padding:30px;
 
}
.employee {
 border: 2px solid gray;
 padding:10px;
}
</style>

CSS 中設定各類別的屬性，讓各組織單位具有邊框，同時讓組織圖依組織架構內縮，這樣比較容易看出組織間的階層關係。

HTML

<body class="claro">
Company
  Sales
   John
   Jason
   Judy
   Julian
  
  Engineers
   Susan
   Sean
   Sally
  
 
</body>

HTML 中用 <div> 定義出組織之間的階層關係。

Script

第 20 行先用 query(".sales")找到 sales 部門，用 children() 取得其所有子輩元件，用 at(0) 取得子輩元件的第一個元件，再用 next() 取得其後的一個元件，將其背景色改成淺綠。當然，用 at(1) 可以直接取得子輩元件中的第二個，不須多此一舉用到 next()，但這只是範例，就別太計較了。
變數 element 中，此時存放的是 Jason 這個元件，第 21 行取得其父輩元件，自然就是 class="sales" 的 <div> 了。將其背景改成粉紅色。
第 23 行用 silblings() 取得 sales 的同輩，也就是 class="engineers" 的 <div>，將其背景改成淺藍色。
第 24 行用 children() 取得 engineers 的所有子輩元件，並將其背景改成淺灰色。

熊伯的外接硬碟

2016年4月11日星期一