JavaScript框架的选择函数:DOM遍历

清单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的那

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!