使用Dojo的Ajax应用开发进阶教程，第4部分: DOM查询与操作

使用Dojo的Ajax应用开发进阶教程，第4部分: DOM查询与操作2011-01-21 IBM 成富DOM 的全称是文档对象模型（Document Object Model）。它是 HTML 和 XML 文档的 API。它定义了文档的逻辑结构，以及对文档进行访问和操作的方式。通过 DOM，开发人员可以在文档中自由导航，也可以添加、更新和删除其中的元素和内容。基本上文档中的任何内容都是可以通过 DOM 进行访问和操作的。本文详细介绍了如何使用 DOM 基本 API 和 Dojo 来进行 DOM 查询和操作。使用的 Dojo 版本是 1.4。下面首先介绍 DOM 的基本概念。

DOM 基本概念

DOM 是给脚本语言（如 JavaScript 和 VBScript 等）来使用的 API。在互联网的早期，HTML 页面都是静态的。开发人员没有办法对页面进行动态修改。DOM 的出现解决了这个问题。DOM 给出了一种描述 HTML 文档结构的方式，并且允许开发人员通过 DOM 提供的 API 来对文档结构进行修改。DOM 目前是 W3C 的推荐规范。主流的浏览器都实现或部分实现该规范。下面首先介绍 DOM 规范的版本历史。

DOM 规范的版本历史

DOM 从出现之后，经过了不断的发展变化，以及 W3C 组织的标准化工作，因此目前的版本比较多，具体如下所示：

DOM 级别 0：1996 年，Netscape 公司的 Netscape Navigator 2.0 浏览器中率先引入了 JavaScript 这一脚本语言。开发人员可以利用 JavaScript 来操作页面上的元素。此时的 DOM 称为 DOM 级别 0。它只支持对页面中的表单、链接和图像进行操作。

中间 DOM：中间 DOM（Intermediate DOM）指的是 DOM 级别 0 和 DOM 级别 1 之间的一个中间版本。在这个版本中，可以通过 JavaScript 来改变页面的样式表。另外，页面上更多的元素可以通过 DOM 来进行操作。

DOM 级别 1：DOM 级别 1 是由 W3C 制定的 DOM 规范标准，在 1998 年发布。DOM 级别 1 的规范定义了访问和操作 HTML 页面中元素的基本方式。

DOM 级别 2：DOM 级别 2 在 DOM 级别 1 的基础上增加了 getElementById（）方法、DOM 遍历和范围、名称空间和 CSS 的支持。

DOM 级别 3：DOM 级别 3 在 DOM 级别 2 的基础上增加了 adoptNode（）和 textContent等方法和属性、文档保存和加载、文档验证和 XPath 等。

本文中将重点介绍 DOM 级别 1 和级别 2 的部分。这些部分的内容目前在不同浏览器之间的兼容性较好，而且也很常用。下面重点介绍 DOM 规范中的基本元素。

DOM 基本元素

对于 HTML 文档中的基本元素，DOM 都有一个抽象的接口与它对应。

文档（Document）：文档接口用来表示整个 HTML 文档。对文档中其它元素和内容的访问和操作，都是从这个接口出发的。

文档片段（DocumentFragment）：文档片段用来表示整个文档树中的一个部分。

节点（Node）：节点接口用来表示 HTML 文档树中的一个节点。这是一个抽象的接口，在文档树中具体存在的都是该接口的子类型，如元素、属性和文本节点等。

节点列表（NodeList）：节点列表表示的是节点的一个有序集合。它的作用类似于 Java 中的 java.util.List接口。可以通过节点在集合中的序号来获取集合中的某个节点。

命名节点映射表（NamedNodeMap）：命名节点映射表表示的是可以根据名称来进行存取的节点集合。它的作用类似于 Java 中的 java.util.Map接口。

元素（Element）：元素是节点的一种子类型，可以包含子节点和属性。

属性（Attr）：属性用来描述元素的特征。它并不是文档树的一部分。

文本（Text）：文本表示元素和属性的文本内容。

DOM 异常（DOMException）：DOM 异常用来表示 DOM 操作无法执行时的错误情况。DOM 异常中定义了一系列的出错条件与错误代码。

DOM 实现（DOMImplementation）：DOM 实现表示与 DOM 接口对应的具体实现。

这里需要注意的是节点列表中的节点是动态的，它反映的是最新的文档结构。比如通过 DOM API 获得了某个元素的子节点列表，如果其中的某个子节点被删除，此节点就不会出现在之前的节点列表中。

在介绍完 DOM 的基本概念之后，下面介绍如何使用 DOM 对当前文档树进行查询。