搜索:
首页 >> JavaScript >> Js高级编程 >> JavaScript框架比较:DOM遍历

JavaScript框架比较:DOM遍历

2010-4-23 作者:dishuipiaoxiang 来源:Denis'Blog 投递文章

DOM遍历

基于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>&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子节点,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

Tags:javascript  框架  dom 
相关文章
手机版 Js高级编程 Asp之家 Aspxhome.com
闽ICP备06017341号