本文向大家簡(jiǎn)單介紹一下DOM遍歷的用法，比如說(shuō)你有一個(gè)給定的元素，你想查找它的父元素、子元素中的一個(gè)、它的上一個(gè)或下一個(gè)節(jié)點(diǎn)兄弟節(jié)點(diǎn)，這就要用到DOM遍歷。

DOM遍歷

基于ID、元素類型、類名查找元素非常有用，但是如果你想基于它在DOM樹中的位置來(lái)查找元素該怎么辦？換句話說(shuō)，你有一個(gè)給定的元素，你想查找它的父元素、子元素中的一個(gè)、它的上一個(gè)或下一個(gè)節(jié)點(diǎn)兄弟節(jié)點(diǎn)。例如，采用下面這段零碎的HTML代碼：

清單1：HTML碎片（一個(gè)table）

<table> 
<thead> 
<tr> 
<th>Name</th> 
<th>EmailAddress</th> 
<th>Actions</th> 
</tr> 
</thead> 
<tbody> 
<tridtrid="row-001"> 
<td>JoeLennon</td> 
<td>joe@joelennon.ie</td> 
<td><ahrefahref="#">Edit</a>&nbsp;  
<ahrefahref="#">Delete</a></td> 
</tr> 
<tridtrid="row-002"> 
<td>JillMacSweeney</td> 
<td>jill@example.com</td> 
<td><ahrefahref="#">Edit</a>&nbsp;  
<ahrefahref="#">Delete</a></td> 
</tr> 
</tbody> 
</table> 
 

 清單1使用縮進(jìn)來(lái)說(shuō)明其中每個(gè)元素節(jié)點(diǎn)在DOM樹中的位置。在這個(gè)實(shí)例中，table元素是根元素，有兩個(gè)子節(jié)點(diǎn)thead和tbody。thead元素有一個(gè)tr子節(jié)點(diǎn)，tr有三個(gè)孩子－－所有的th元素。tbody元素有兩個(gè)tr子節(jié)點(diǎn)，每個(gè)tr節(jié)點(diǎn)有三個(gè)孩子。在上述每一行的第三個(gè)節(jié)點(diǎn)中進(jìn)一步包含子節(jié)點(diǎn)，都是兩個(gè)鏈接標(biāo)記。

◆正如你知道的那樣，你可以使用一個(gè)JavaScript框架的選擇函數(shù)通過ID很輕松的選擇一個(gè)元素。在這個(gè)實(shí)例中，有兩個(gè)元素?fù)碛蠭D，它們是ID分別為row-001和row-002的tr元素。使用Prototype庫(kù)選擇第一個(gè)tr，可以使用下面的代碼：

vartheRow=$('row-001');  
 

在上一章，你還了解到，基于元素的類型或class使用選擇器來(lái)獲取元素。在這個(gè)實(shí)例中，你可以使用下面的語(yǔ)法來(lái)得到所有的td元素。

varallCells=$$('td');  
 

改代碼的主要問題在于它返回了每一個(gè)td元素。但是，如果你只想得到ID為row-001的tr的所有td元素該怎么辦？這正是DOM遍歷函數(shù)發(fā)揮作用的地方。首先，讓我們使用原型來(lái)選擇ID為row-001的tr的所有的子級(jí)。

varfirstRowCells=theRow.childElements();  
 

這將返回theRow變量（你最初設(shè)置的ID為row-001的tr）所有子元素的數(shù)組。

◆接下來(lái)，我們假設(shè)你只想得到該行的第一個(gè)子元素。在本例中，即包含“JoeLennon”文本的td元素。要做到這一點(diǎn)，使用下面的語(yǔ)句：

varfirstRowFirstCell=theRow.down();
真簡(jiǎn)單！這個(gè)特定的使用方法等價(jià)于：

varfirstRowFirstCell=theRow.childElements()[0];  
 

也可以這樣表示：

varfirstRowFirstCell=theRow.down(0);  
 

JavaScript的索引從零開始，所以上面的語(yǔ)句主要告知JavaScript來(lái)選擇第一個(gè)子元素。要選擇第二個(gè)子元素，你可以這樣用：

varfirstRowSecondCell=theRow.down(1);  
 

或者，你可以在兄弟節(jié)點(diǎn)之間瀏覽DOM。本例中，第二個(gè)單元格是第一個(gè)單元格的下一個(gè)兄弟節(jié)點(diǎn)。因此，你可以使用下面的語(yǔ)句：

varfirstRowSecondCell=firstRowFirstCell.next();  
 

與down()函數(shù)工作一樣，選擇第三個(gè)單元格可以這樣使用。

varfirstRowThirdCell=firstRowFirstCell.next(1);  
 

◆除了使用索引來(lái)查找特定節(jié)點(diǎn)外，Prototype庫(kù)還可以使用CSS選擇器語(yǔ)法。在清單1中，我們要找到第二個(gè)包含JillMacSweeney’詳細(xì)信息的鏈接（“刪除”鏈接）。

varsecondRowSecondLink=$('row-002').down('a',1);  
 

在本例中，使用$函數(shù)來(lái)查找ID為row-002的那一行，向下遍歷到第二個(gè)后代a元素（錨點(diǎn)）。

一些框架還允許“菊花鏈?zhǔn)?rdquo;的遍歷功能，這意味著你可以彼此連接遍歷命令。上面的例子中，Prototype庫(kù)的另一種表達(dá)方式是這樣的：

varsecondRowSecondLink=$('row-002').down('a').next();  
 

看看下面的例子：

vardomTraversal=$('row-001').down().up().next().previous();  
 

正如你所見，菊花鏈允許你連接多個(gè)DOM遍歷語(yǔ)句。事實(shí)上，上述例子實(shí)際上最終選擇ID為row-001的tr元素，所以菊花鏈又回到了開始的地方。
 

【編輯推薦】

1. 技術(shù)分享 如何獲取Dom元素的X/Y坐標(biāo)
2. JQuery創(chuàng)建DOM元素方法解析
3. JavaScript獲取HTML DOM節(jié)點(diǎn)元素詳解
4. JavaScript和DOM輕松實(shí)現(xiàn)數(shù)據(jù)訪問
5. HTML DOM與XML DOM的區(qū)別與聯(lián)系探究