4.4　修改Web页面：概览

JavaScript赋予了我们动态修改Web页面的能力。通过使用JavaScript，可以添加图片和文本、删除内容或者立即改变页面上元素的外观。实际上，动态改变Web页面的内容是支持JavaScript的最新的Web站点的一个特点。例如，Google Maps（http：//maps.google.com/）提供了对世界地图的访问；当放大地图或者滚动地图，页面会更新而不需要载入一个新的Web页面。类似地，当把鼠标指针停留在Netflix（www.netflix.com）上的一部电影名上的时候，在页面顶端会出现一个信息框，提供有关电影的更详细的信息（如图4-1所示）。在这些例子中，JavaScript都改变了Web浏览器最初下载的HTML。

在本章中，我们将学习如何使用JavaScript修改Web页面。我们将添加新的内容、HTML标签和HTML属性，并且还将修改页面上已有的内容和标签。换句话说，将使用JavaScript来产生新的HTML并改变页面上已有的HTML。

图　4-1　JavaScript可以使得Web页面更容易扫视或阅读，只在需要那些内容的时候才显示它们。在Netflix.com上，电影的描述信息隐藏了，但是，当鼠标指针移动到电影名或缩略图上的时候会显示出来

这似乎令人难以置信，但是，如果你知道如何使用HTML和CSS创建Web页面，你就已经知道了有效地使用JavaScript来创建交互性Web站点所需的很多知识。例如，jQuery UI项目的流行插件Datepicker，使得访问者能够很容易地从一个表单上选择一个日期（例如，作为航班预订或活动计划的一部分）。当访问者单击一个特别标记的文本字段的时候，会弹出一个日历（如图4-2所示）。尽管效果真的很酷，并且日历使得访问者很容易选择日期，但JavaScript只是提供了交互性，实际的日历创建同样使用了你所熟悉的旧的HTML和CSS知识。

图　4-2　jQueryUI（http：//jqueryui.com）为Web应用程序提供了有用的用户界面挂件。例如，Datepicker提供了一种易用的、用户友好的方法来选定一个日期

如果深入到这个日历内部，你会看到诸如div、table和＜td＞标签等一系列HTML标签，它们带有特定的class和ID（ui-datepicker-month、ui-datepicker-div等）。通过带有class和ID styles的一个样式表来添加颜色、字体和格式。总而言之，可以使用HTML和CSS来自行创建同一个日历。JavaScript只是生成显示性的交互：当访问者在一个表单字段上单击的时候，让日历显示出来；并且当访问者选中一个日期的时候，让日历消失。

因此，有一种对现代JavaScript编程的认识（特别是当它应用于用户界面设计的时候），认为其是一种将HTML的创建和CSS的应用自动化的方式。在图4-1中的Netflix例子中，当访问者把鼠标指针悬停在一部电影名上的时候，JavaScript让弹出的信息提示显示，但是，真正有趣的部分（信息提示的设计）善用了HTML和CSS，这些事情你已经知道如何做了！

因此，使用JavaScript的目的主要是操作一个Web页面，通过添加新的内容、更改页面的HTML或者对一个元素应用CSS。不论何时改变一个页面的内容、HTML或CSS，不管是添加用弹出菜单实现的导航栏、创建一个JavaScript驱动的幻灯片，或者是直接让页面淡入视线（就像在第1章教程中所做的那样），我们都要执行两个主要步骤。

1.标识页面上的一个元素。

元素是一个已有的标签，并且需要首先在JavaScript中标识它（将在本章学习如何做到这点），然后才能够对元素做某些事情。例如，要让页面淡入到视野中，首先必须选择页面的内容（＜body＞标签）；要让鼠标指针移动到一个按钮上的时候出现弹出菜单，需要选择该按钮。即便只是想要使用JavaScript在Web页面的底部添加JavaScript文本，也需要标识一个标签，以便在标签之中、之前或之后插入文本。

2.使用元素做一些事情。

没错，“做一些事情”并不是非常明确的指令。这是因为对于一个元素可以做几乎无穷多的事情，从而改变Web页面的外观和行为。实际上，本书的大部分篇幅都用于教你对页面元素做不同的事情。下面是一些例子：

·改变元素的属性。例如，当在页面中实现一个＜div＞的动画的时候，改变该元素在页面上的位置。

·添加新的内容。如果在填充Web表单的时候，访问者错误地填写了一个字段，通常会产生一条错误消息“Please supply an email address”。在这种情况下，就在某处添加了和该表单字段相关的内容。

·删除元素。在图4-1中的Netflix示例中，当鼠标光标从电影名上移开的时候，弹出信息框就消失了。在这个例子中，JavaScript从页面删除了弹出的信息框。

·从元素中提取信息。其他时候，我们想要知道已经标识的标签的某些内容，例如，要验证一个文本字段，需要标识该文本字段，然后发现在该字段输入了什么文本，换句话说，需要获取该字段的值。

·添加/删除一个类属性。有的时候，我们想要使页面上的元素改变外观：段落中的文本变为蓝色，或者文本字段的背景颜色变为红色，以表示一个错误。尽管JavaScript可以进行这些视觉变化，最容易的方式往往是直接应用一个类，并且让Web浏览器根据样式表中的一个CSS样式来做出这些视觉改变。例如，要将一个段落的文本改为蓝色，可以直接创建带有蓝色文本颜色的一个类样式，并且，使用JavaScript将这个类动态地应用于该段落。

很多时候，要同时做上面列出的几件事情。例如，假设想要确保访问者不会忘记在一个表单字段中输入其E-mail地址。如果他尝试提交表单而没有输入E-mail地址，你可以提醒他。这个任务可能包括首先搞清楚他是否在该文本字段中输入了什么内容（从该元素提取信息）；如果他没有输入，输出一条错误消息（“adding new content”），并且突出显示该表单字段（通过给该文本字段添加一个类实现）。

选择一个页面元素是第一步。要理解如何使用JavaScript来标识和修改页面的一部分，首先需要知道文档对象模型。