JavaScript 框架比较(3)

var theElement = Y.one('#the_element');

同样，与使用双美元符号函数根据标记或类名检索元素不同的是，YUI 使用了 Y.all 函数：

var allOddRows = Y.all('tr.odd');

ExtJS 使用类似的方式，用以下语法根据 ID 选取元素：

var theElement = Ext.get('the_element');

以下语法用于根据标记和类名选取元素：

var allOddRows = Ext.select('tr.odd');

在下一节中，您将看到 JavaScript 框架如何轻松遍历 DOM，换句话说，就是查找选定元素的父元素、子元素、兄弟元素。您还会学到如何使用库操作 DOM 以修改元素。

DOM 遍历

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

清单 1. HTML 片段（一个 HTML 表）

<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 元素，需要用到以下代码：

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

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

var allCells = $$('td');

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

var firstRowCells = theRow.childElements();

这将返回 theRow 变量（之前已设为 ID 为 row-001 的元素）的所有子元素的数组。

下一步，假设只希望取得该行的第一个子节点，在本例中，是内容为 “Joe Lennon” 的 td 元素。应使用以下语句： var firstRowFirstCell = theRow.down();

很简单吧？这种特别的用法等价于： var firstRowFirstCell = theRow.childElements()[0];

也可以表示为： var firstRowFirstCell = theRow.down(0);