掌握Ajax，第4部分: 利用DOM进行Web响应

掌握Ajax，第4部分: 利用DOM进行Web响应2011-09-27 IBM Brett McLaughlin将 HTML 转换为对象模型

简介：程序员（使用后端应用程序）和 Web 程序员（编写 HTML、CSS 和 JavaScript 上）之间的分水岭是长久存在的。但是，Document Object Model （DOM）弥补了这个裂缝，使得在后端使用 XML 同时在前端使用 HML 切实可行，并成为极其有效的工具。在本文中，Brett McLaughlin 介绍了 Document Object Model，解释它在 Web 页面中的应用，并开始挖掘其在 JavaScript 中的用途。

与许多 Web 程序员一样，您可能使用过 HTML。HTML 是程序员开始与 Web 页面打交道的方式；HTML 通常是他们完成应用程序或站点前的最后一步——调整一些布局、颜色或样式。不过，虽然经常使用 HTML，但对于 HTML 转到浏览器呈现在屏幕上时到底发生了什么，人们普遍存在误解。在我分析您认为可能发生的事情及其可能错误的原因之前，我希望您对设计和服务 Web 页面时涉及的过程一清二楚：

1.一些人（通常是您！）在文本编辑器或 IDE 中创建 HTML。

2.然后您将 HTML 上载到 Web 服务器，例如 Apache HTTPD，并将其公开在 Internet 或 intranet 上。

3.用户用 Firefox 或 SafariA 等浏览器请求您的 Web 页面。

4.用户的浏览器向您的服务器请求 HTML。

5.浏览器将从服务器接收到的页面以图形和文本方式呈现；用户看到并激活 Web 页面。

这看起来非常基础，但事情很快会变得有趣起来。事实上，步骤 4 和步骤 5 之间发生的巨大数量的 “填充物（stuff）” 就是本文的焦点。术语 “填充物” 也十分适用，因为多数程序员从来没有真正考虑过当用户浏览器请求显示标记时到底在标记身上发生了什么。

是否浏览器只是读取 HTML 中的文本并将其显示？

CSS 呢？尤其是当 CSS 位于外部文件时。

JavaScript 呢？它也通常位于外部文件中。

浏览器如何处理这些项，如果将事件处理程序、函数和样式映射到该文本标记？

实践证明，所有这些问题的答案都是 Document Object Model。因此，废话少说，直接研究 DOM。

Web 程序员和标记

对于多数程序员，当 Web 浏览器开始时他们的工作就结束了。也就是说，将一个 HTML 文件放入 Web 浏览器的目录上后，您通常就认为它已经“完成”，而且（满怀希望地）认为再也不会考虑它！说到编写干净、组织良好的页面时，这也是一个伟大的目标；希望您的标记跨浏览器、用各种版本的 CSS 和 JavaScript 显示它应该显示的内容，一点错都没有。

问题是这种方法限制了程序员对浏览器中真正发生的事情的理解。更重要的是，它限制了您用客户端 JavaScript 动态更新、更改和重构 Web 页面的能力。摆脱这种限制，让您的 Web 站点拥有更大的交互性和创造性。