JavaScript 框架比较（3）DOM 遍历

look_w

DOM 遍历根据 ID、元素类型或 CSS 类名查找元素非常有用，但如何根据元素在 DOM 树中的位置执行查找呢？换而言之，根据一个给定的元素查找其父元素、子元素、前一个或后一个兄弟元素。例如，看一下清单 1 的 HTML 片段。                               
清单 1. HTML 片段（一个 HTML 表）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<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>joe@joelennon.ie</td>             <td><a href="#">Edit</a>&nbsp;                 <a href="#">Delete</a></td>         </tr>         <tr id="row-002">             <td>Jill Mac Sweeney</td>             <td>jill@example.com</td>             <td><a href="#">Edit</a>&nbsp;                 <a href="#">Delete</a></td>         </tr>     </tbody> </table>

清单 1 用缩进表示每个元素在 DOM 节点树中的位置。在该例中，table 元素是根元素，它有两个子节点，thead 和 tbody。thead 元素只有一个子节点 tr，后者有三个子节点 — 所有 th 元素。tbody 元素有两个子节点，均为 tr 元素，每个 tr 元素又有三个子元素。每行的第三个子元素又有两个子节点，都是 a （锚点）标记。        
如您所知，可以使用 JavaScript 框架的 Selector 函数根据 ID 轻松选取元素。在该例中，有两个元素具有 ID — 均为 tr（表行）元素，ID 分别为 row-001 和 row-002。要使用 Prototype 选取第一个 tr 元素，需要用到以下代码：        

1	var theRow = $('row-001');

在前面的小节中，您学会了如何使用选择器根据类型或 CSS 类检索元素。在本例中，可以使用以下语法选取所有 td 元素。

1	var allCells = $$('td');

这段代码的问题是它将返回 DOM 中的所有 td 元素。但是，如果只希望获取 ID 为 row-001 的行中的 td 元素，怎么办呢？这时就该使用 DOM 遍历函数了。首先，使用 Prototype 选取 ID 为 row-001 的 tr 元素的所有子节点：        

1	var firstRowCells = theRow.childElements();

这将返回 theRow 变量（之前已设为 ID 为 row-001 的元素）的所有子元素的数组。
下一步，假设只希望取得该行的第一个子节点，在本例中，是内容为 “Joe Lennon” 的 td 元素。应使用以下语句：        

1	var firstRowFirstCell = theRow.down();

很简单吧？这种特别的用法等价于：        

1	var firstRowFirstCell = theRow.childElements()[0];

也可以表示为：        

1	var firstRowFirstCell = theRow.down(0);

JavaScript 索引值从零（0）开始，所以以上语句实际上是告诉 JavaScript 选取第一个子元素。要选取第二个子元素（包含 joe@joelennon.ie 邮件地址的单元格），可以使用下面的语句：        

1	var firstRowSecondCell = theRow.down(1);

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

1	var firstRowSecondCell = firstRowFirstCell.next();

这与 down() 函数使用了相同的方式，因此可以使用下面的语句选择第三个单元格：        

1	var firstRowThirdCell = firstRowFirstCell.next(1);

除了使用索引查找特定节点外，Prototype 还允许使用 CSS 选择器语法。考虑  的例子，找到包含 Jill Mac Sweeney 的明细的行的第二个链接（“Delete” 链接）：        

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

在本例中，可以使用美元符号函数找到 ID 为 row-002 的元素，然后向下遍历 DOM，直到找到下一个后代 a（锚点）元素。        
有些框架可以使用 “菊花链” 遍历函数，表示可以将遍历命令互相连接。在 Prototype 中实现前一个例子的另一种方法是：        

1	var secondRowSecondLink = $('row-002').down('a').next();

考虑下面的例子：        

1	var domTraversal = $('row-001').down().up().next().previous();

如您所见，菊花链方式可以将几个 DOM 遍历语句连接起来。实际上，上例实际上选择 tr 元素 row-001，因此菊花链刚好回到了起点！