DOM遍歷
基於ID、元素類型、類別名稱來尋找元素非常有用，但是如果你想基於它在DOM樹中的位置來尋找元素該怎麼辦？換句話說，你有一個給定的元素，你想找出它的父元素、子元素中的一個、它的上一個或下一個節點兄弟節點。例如，採用下面這段零碎的HTML程式碼：
清單1：HTML碎片（一個table）
<table>
<thead>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr id="row-001">
<td>Joe Lennon</td>
<td>[email protected]</td>
<td><a href="#">Edit</a>
<a href="#">Delete</a></td>
</tr>
<tr id="row-002">
<td>Jill Mac Sweeney</td>
<td>[email protected]</td>
<td><a href="#">Edit</a>
<a href="#">Delete</a></td>
</tr>
</tbody>
</table>
清單1使用縮排說明其中每個元素節點在DOM樹中的位置。在這個實例中，table元素是根元素，有兩個子節點thead和tbody。 thead元素有一個tr子節點，tr有三個孩子－所有的th元素。 tbody元素有兩個tr子節點，每個tr節點有三個孩子。在上述每一行的第三個節點中進一步包含子節點，都是兩個連結標記。
正如你所知道的那樣，你可以使用一個JavaScript框架的選擇函數透過ID很輕鬆的選擇一個元素。在這個實例中，有兩個元素擁有ID，它們是ID分別為row-001和row-002的tr元素。使用Prototype庫選擇第一個tr，可以使用下面的程式碼：
var theRow = $('row-001');
在上一章，你也了解到，基於元素的型別或class使用選擇器來取得元素。在這個實例中，你可以使用下面的語法來得到所有的td元素。
var allCells = $$('td');
改代碼的主要問題在於它傳回了每一個td 元素。但是，如果你只想得到ID為row-001的tr的所有td元素該怎麼辦？這正是DOM遍歷函數發揮作用的地方。首先，讓我們使用原型來選擇ID為row-001的tr的所有的子級。
var firstRowCells = theRow.childElements();
這將會傳回theRow變數（你原本設定的ID為row-001的tr）所有子元素的陣列。
接下來，我們假設你只想得到該行的第一個子元素。在本例中，即包含「Joe Lennon」文本的td元素。要做到這一點，請使用下面的語句：
var firstRowFirstCell = theRow.down();
真簡單！這個特定的使用方法等價於：
var firstRowFirstCell = theRow.childElements()[0];
也可以這樣表示：
var firstRowFirstCell = theRow.down(0);
JavaScript的索引從零開始，所以上面的語句主要告知JavaScript來選擇第一個子元素。要選擇第二個子元素（儲存格包含電子郵件地址[email protected] ），你可以這樣用：
var firstRowSecondCell = theRow.down(1);
或者，你可以在兄弟節點之間瀏覽DOM。本例中，第二個單元格是第一個單元格的下一個兄弟節點。因此，你可以使用下面的語句：
var firstRowSecondCell = firstRowFirstCell.next();
與down()函數運作一樣，選擇第三個儲存格可以這樣使用。
var firstRowThirdCell = firstRowFirstCell.next(1);
除了使用索引來尋找特定節點外，Prototype庫還可以使用CSS選擇器語法。在清單1中，我們要找到第二個包含Jill Mac Sweeney' 詳細資訊的連結（「刪除」連結）。
var secondRowSecondLink = $('row-002').down('a', 1);
在本例中，使用$函數來找出ID為row-002的那一行，向下遍歷到第二個後代a元素（錨點）。
一些框架還允許「菊花鍊式」的遍歷功能，這意味著你可以彼此連接遍歷命令。上面的例子中，Prototype函式庫的另一種表達方式是這樣的：
var secondRowSecondLink = $('row-002').down('a').next();
看看下面的例子：
var domTraversal = $('row-001').down().up().next().previous();
如你所見，菊花鏈允許你連接多個DOM遍歷語句。事實上，上述例子實際上最終選擇ID為row-001的tr元素，所以菊花鏈又回到了開始的地方。
轉載網址： http://www.denisdeng.com/?p=708
原文網址： http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html