深入学习JavaScript DOM遍历方法

　　本文向大家简单介绍一下DOM遍历的用法，比如说你有一个给定的元素，你想查找它的父元素、子元素中的一个、它的上一个或下一个节点兄弟节点，这就要用到DOM遍历  。

　　DOM遍历

　　基于ID、元素类型、类名查找元素非常有用，但是如果你想基于它在DOM树中的位置来查找元素该怎么办？换句话说，你有一个给定的元素，你想查找它的父元素、子元素中的一个、它的上一个或下一个节点兄弟节点  。例如，采用下面这段零碎的HTML代码：

　　清单1：HTML碎片（一个table）

<table> 
<thead> 
<tr> 
<th>Nameth> 
<th>EmailAddressth> 
<th>Actionsth> 
tr> 
thead> 
<tbody> 
<tridtrid="row-001"> 
<td>JoeLennontd> 
<td>joe@joelennon.ietd> 
<td><ahrefahref="#">Edita>   
<ahrefahref="#">Deletea>td> 
tr> 
<tridtrid="row-002"> 
<td>JillMacSweeneytd> 
<td>jill@example.comtd> 
<td><ahrefahref="#">Edita>   
<ahrefahref="#">Deletea>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，可以使用下面的代码：

vartheRow=$(row-001);  
 

　　在上一章，你还了解到，基于元素的类型或class使用选择器来获取元素  。在这个实例中，你可以使用下面的语法来得到所有的td元素  。

varallCells=$$(td);  
 

　　改代码的主要问题在于它返回了每一个td元素  。但是，如果你只想得到ID为row-001的tr的所有td元素该怎么办？这正是DOM遍历函数发挥作用的地方  。首先，让我们使用原型来选择ID为row-001的tr的所有的子级  。

varfirstRowCells=theRow.childElements();  
 

　　这将返回theRow变量（你最初设置的ID为row-001的tr）所有子元素的数组  。

　　◆接下来，我们假设你只想得到该行的第一个子元素  。在本例中，即包含“JoeLennon”文本的td元素  。要做到这一点，使用下面的语句：

　　varfirstRowFirstCell=theRow.down();
真简单！这个特定的使用方法等价于：

varfirstRowFirstCell=theRow.childElements()[0];  
 

　　也可以这样表示：

varfirstRowFirstCell=theRow.down(0);  
 

　　JavaScript的索引从零开始，所以上面的语句主要告知JavaScript来选择第一个子元素  。要选择第二个子元素，你可以这样用：

varfirstRowSecondCell=theRow.down(1);  
 

　　或者，你可以在兄弟节点之间浏览DOM  。本例中，第二个单元格是第一个单元格的下一个兄弟节点  。因此，你可以使用下面的语句：

varfirstRowSecondCell=firstRowFirstCell.next();  
 

　　与down()函数工作一样，选择第三个单元格可以这样使用  。

varfirstRowThirdCell=firstRowFirstCell.next(1);  
 

　　◆除了使用索引来查找特定节点外，Prototype库还可以使用CSS选择器语法  。在清单1中，我们要找到第二个包含JillMacSweeney’详细信息的链接（“删除”链接）  。

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

　　在本例中，使用$函数来查找ID为row-002的那一行，向下遍历到第二个后代a元素（锚点）  。

　　一些框架还允许“菊花链式”的遍历功能，这意味着你可以彼此连接遍历命令  。上面的例子中，Prototype库的另一种表达方式是这样的：

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

　　看看下面的例子：

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

　　正如你所见，菊花链允许你连接多个DOM遍历语句  。事实上，上述例子实际上最终选择ID为row-001的tr元素，所以菊花链又回到了开始的地方  。