译文：JavaScript框架较量（二）

基于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>joe@joelennon.ie</td>
<td><a href="#">Edit</a>
<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>
<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来选择第一个子元素。要选择第二个子元素（单位格包括电子邮件地点joe@joelennon.ie），你可以这样用：

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

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!