javascript框架比较（二）

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);

　　JavaScript 索引值从零（0）开始，所以以上语句实际上是告诉 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 的明细的行的第二个链接（“Delete” 链接）：

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

　　在本例中，可以使用美元符号函数找到 ID 为 row-002 的元素，然后向下遍历 DOM，直到找到下一个后代 a（锚点）元素。

　　有些框架可以使用 “菊花链” 遍历函数，表示可以将遍历命令互相连接。在 Prototype 中实现前一个例子的另一种方法是：

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

　　考虑下面的例子：

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

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

　　DOM 操作

　　上文中，您已经看到如何使用 JavaScript 框架的选择器和 DOM 遍历来简化特定元素的选取。然而，要想改变 Web 页面中的特定元素的外观或内容，需要操作 DOM 并应用改变。如果使用纯 JavaScript 将会非常繁琐，幸运的是，大多数 JavaScript 框架提供了有用的函数，简化了这些操作。

　　假设您有一个 div 元素，其 id 是 the-box：

<div　id="the-box">Message　goes　here</div>

　　如果要用 jQuery 改变 “Message goes here” 文本，方法如下：

$('the-box').html('This　is　the　new　message!');

　　实际上，可以在函数内部使用 HTML 代码，它将由浏览器解析。例如：

$('the-box').html('This　is　the　<strong>new</strong>　message!');

　　在本例中，div 元素的内容在 DOM 中呈现为：

<div　id="the-box">This　is　the　<strong>new</strong>　message!</div>

　　当然，在一些情况下您需要使用特殊字符，如大于号或小于号。可以不指定专门的 HTML 实体代码，而是使用 jQuery 的 text 函数：

$('the-box').text('300　>　200');

　　这将把 div 元素更新为以下代码：

<div　id="the-box">300　>　200</div>

　　在上面的例子中，原有内容被新内容取代。如果只是想把消息添加到文本的后面，该怎么做呢？幸好，jQuery 提供了专门的 append 函数：

$('the-box').append(',　here　goes　message');

　　将这个函数应用到初始的 div 元素，div 元素的内容就变成下面这样：

<div　id="the-box">Message　goes　here,　here　goes　message</div>

　　除了附加以外，您还可以 “前置” 内容，即在已有内容的前面而不是末尾插入新内容。另外，jQuery 提供了在给定元素之外插入内容的函数，不管是在开头还是在末尾。这类函数可以替换内容、清空内容、从 DOM 移除所有元素、克隆元素等等。

　　除了 DOM 操作函数，JavaScript 框架还包含一些用于以编程方式处理元素样式和 CSS 类的函数。例如，假设您有一个表，您想要在鼠标移到某一行时高亮显示该行。您创建了一个特定的名叫 hover 的 CSS 类，并且您想要将这个类动态添加到行中。在 YUI 中，可以使用以下代码检查行中是否已经具有 hover 类，如果已经有的话，则删除它，如果没有的话，则添加它：

if(row.hasClass('hover'))　row.removeClass('hover');　else　row.addClass('hover');

　　而且，大多数 JavaScript 框架都有内置的 CSS 操作函数。

该文章转摘自-网页制作大宝库(www.dabaoku.com) - 原文链接：http://www.dabaoku.com/jiaocheng/biancheng/javascript/201009136832_2.shtml