使用JavaScript操作DOM

　在任何应用中，我们都需要在用户的使用过程中改变用户界面，为用户执行的操作和完成的进度提供反馈。这些反馈包括修改单个元素的标签或颜色、弹出 临时的对话框、使用一组全新的UI组件替换大部分的屏幕内容等等。到目前为止，最常见的方式就是，通过提供给浏览器一段声明式的HTML来构造DOM树(换句话说，也就是编写HTML页面)。

　　我们在代码清单2-2和图2-3中显示的文档有点太大和太复杂了，还是从小的步骤开始做DOM操作吧。假设我们要向用户显示友好的问候。当页面 第一次加载的时候，我们并不知道他的名字，因此想要在稍后修改页面的结构，以添加上用户的名字，通过以编程方式操作DOM节点可以做这件事。代码清单 2-3展示了这个简单页面初始的HTML标记。

　　代码清单2-3 ajax的“hello”页面

　　我们添加了两个到外部资源的引用：CSS和包含javaScript代码的文件。我们还声明了带ID的空元素，以后可以通过编程方式向其中添加更多的元素。

　　我们来看一下链接到的资源。通过修改字体和颜色，样式表为区分清单中不同类别的条目定义了一些简单的样式(代码清单2-4)。

　　代码清单2-4 hello.css

我们定义了两个样式来描述最初的DOM节点(样式的名称可以是任意的，我们取这两个名字是为了使例子容易理解，当然也可以给它们取名为fred和jim)。这些样式类都没有在HTML中用到，但是我们将以编程方式将它们应用在元素上。代码清单2-5显示了伴随代码清单2-4的web页面的javaScript。当加载文档时，我们将以编程方式为一个已有的节点设置样式，并且以编程方式创建一些新的DOM元素。

　　代码清单2-5 hello.js

　　JavaScript代码比HTML或样式表更加复杂。代码的入口点是window.onload()函数，一旦整个页面加载完毕，浏览器就会 调用这个函数。这个时候DOM树已经建造好，可以对它进行操作。代码清单2-5利用一些DOM操作方法来改变DOM节点的属性，显示和隐藏某些节点，甚至 在运行时创建一些新节点。我们这里没有覆盖所有的DOM操作方法(可以查看“资源”一节获得所有的DOM操作方法)。在下面几个小节中，我们将深入讨论一些最有用的方法。