文档对象

首先,需要访问对象模型本身。这非常容易;要在运行于 Web 页面上的任何 JavaScript 代码中使用内置 document 变量,可以编写如下代码:

var domTree = document;

每项都是一个节点

显然,document 对象很重要,但这只是开始。在进一步深入之前,需要学习另一个术语:节点。您已经知道标记的每个部分都由一个对象表示,但它不只是一个任意的对象,它是特定类型的对象,一个 DOM 节点。更特定的类型,比如文本、元素和属性,都继承自这个基本的节点类型。所以可以有文本节点、元素节点和属性节点。

如果已经有很多 JavaScript 编程经验,那您可能已经在使用 DOM 代码了。如果到目前为止您一直在跟踪本 Ajax 系列,那么现在您一定 使用 DOM 代码有一段时间了。例如,代码行 var number = document.getElementById("phone").value; 使用 DOM 查找特定元素,然后检索该元素的值(在本例中是一个表单字段)。所以即使您没有意识到这一点,但您每次将 document 键入 JavaScript 代码时都会使用 DOM。

详细解释已经学过的术语,DOM 树是对象的树,但更具体地说,它是节点 对象的树。在 Ajax 应用程序中或任何其他 JavaScript 中,可以使用这些节点产生下列效果,比如移除元素及其内容,突出显示特定文本,或添加新图像元素。因为都发生在客户端(运行在 Web 浏览器中的代码),所以这些效果立即发生,而不与服务器通信。最终结果通常是应用程序感觉起来响应更快,因为当请求转向服务器时以及解释响应时,Web 页面上的内容更改不会出现长时间的停顿。

在多数编程语言中,需要学习每种节点类型的实际对象名称,学习可用的属性,并弄清楚类型和强制转换;但在 JavaScript 中这都不是必需的。您可以只创建一个变量,并为它分配您希望的对象(正如您已经看到的):

var domTree = document;
var phoneNumberElement = document.getElementById("phone");
var phoneNumber = phoneNumberElement.value;

没有类型,JavaScript 根据需要创建变量并为其分配正确的类型。结果,从 JavaScript 中使用 DOM 变得微不足道(将来有一篇文章会专门讲述与 XML 相关的 DOM,那时将更加巧妙)。

结束语

在这里,我要给您留一点悬念。显然,这并非是对 DOM 完全详尽的说明;事实上,本文不过是 DOM 的简介。DOM 的内容要远远多于我今天介绍的这些!

本系列的下一篇文章将扩展这些观点,并深入探讨如何在 JavaScript 中使用 DOM 来更新 Web 页面、快速更改 HTML 并为您的用户创建更交互的体验。在后面专门讲述在 Ajax 请求中使用 XML 的文章中,我将再次返回来讨论 DOM。所以要熟悉 DOM,它是 Ajax 应用程序的一个主要部分。

此时,深入了解 DOM 将十分简单,比如详细设计如何在 DOM 树中移动、获得元素和文本的值、遍历节点列表,等等,但这可能会让您有这种印象,即 DOM 是关于代码的,而事实上并非如此。

在阅读下一篇文章之前,试着思考一下树结构并用一些您自己的 HTML 实践一下,以查看 Web 浏览器是如何将 HTML 转换为标记的树视图的。此外,思考一下 DOM 树的组织,并用本文介绍的特殊情况实践一下:属性、有元素混合在其中的文本、没有 文本内容的元素(比如 img 元素)。