JavaScript 框架比较(4)

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 移除所有元素、克隆元素等等。