DOM 操作上文中，您已经看到如何使用 JavaScript 框架的选择器和 DOM 遍历来简化特定元素的选取。然而，要想改变 Web 页面中的特定元素的外观或内容，需要操作 DOM 并应用改变。如果使用纯 JavaScript 将会非常繁琐，幸运的是，大多数 JavaScript 框架提供了有用的函数，简化了这些操作。
假设您有一个 div 元素，其 id 是 the-box：
1
| <div id="the-box">Message goes here</div>
|
如果要用 jQuery 改变 “Message goes here” 文本，方法如下：
1
| $('the-box').html('This is the new message!');
|
实际上，可以在函数内部使用 HTML 代码，它将由浏览器解析。例如：
1
| $('the-box').html('This is the <strong>new</strong> message!');
|
在本例中，div 元素的内容在 DOM 中呈现为：
1
| <div id="the-box">This is the <strong>new</strong> message!</div>
|
当然，在一些情况下您需要使用特殊字符，如大于号或小于号。可以不指定专门的 HTML 实体代码，而是使用 jQuery 的 text 函数：
1
| $('the-box').text('300 > 200');
|
这将把 div 元素更新为以下代码：
1
| <div id="the-box">300 > 200</div>
|
在上面的例子中，原有内容被新内容取代。如果只是想把消息添加到文本的后面，该怎么做呢？幸好，jQuery 提供了专门的 append 函数：
1
| $('the-box').append(', here goes message');
|
将这个函数应用到初始的 div 元素，div 元素的内容就变成下面这样：
1
| <div id="the-box">Message goes here, here goes message</div>
|
除了附加以外，您还可以 “前置” 内容，即在已有内容的前面而不是末尾插入新内容。另外，jQuery 提供了在给定元素之外插入内容的函数，不管是在开头还是在末尾。这类函数可以替换内容、清空内容、从 DOM 移除所有元素、克隆元素等等。
除了 DOM 操作函数，JavaScript 框架还包含一些用于以编程方式处理元素样式和 CSS 类的函数。例如，假设您有一个表，您想要在鼠标移到某一行时高亮显示该行。您创建了一个特定的名叫 hover 的 CSS 类，并且您想要将这个类动态添加到行中。在 YUI 中，可以使用以下代码检查行中是否已经具有 hover 类，如果已经有的话，则删除它，如果没有的话，则添加它：
1
| if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');
|
而且，大多数 JavaScript 框架都有内置的 CSS 操作函数。 |
