9.1 DOM的定义
9.1 DOM的定义
在希望通过 JavaScript 来对页面的内容进行操作时，如果文档的内容与结构能够以一种便于程序处理的形式表现，无疑会给处理带来方便。比如说，虽然可以直接修改以字符串形式表示的 HTML 资源内容，但如果可以对“id 是 foo 的
<div>标签”，或“所有的<a>标签”这样的集合进行操作，则程序的可读性会更高，书写也较为简单。为此，JavaScript 中引入了DOM 的概念。
DOM 是一种 API，其作用为在程序中使用 HTML文档以及 XML 文档。在 DOM 中，HTML 文档与XML 文档会以树形对象集合的形式被使用。这一树形结构称为 DOM 树。
DOM 树中的一个个对象被称为节点。节点之间形成了一个树形结构，树中的某个节点可能会引用另外一个节点。根据引用关系，分别有父节点、子节点、兄弟节点、祖先节点、子孙节点等类型。
根据 W3C 的定义，DOM 可以分为 Level1 ～ 3这几层。
9.1.1 DOM Level 1
DOM Level 1 是由 Core 与 HTML 这两个模块组成的（表 9.1）。在 DOM Level 1 Core 中包含很多操作 DOM 树的方法。表 9.2 介绍了 DOM Level 1 Core 中定义的一些基本方法，更为详细的内容会在之后进一步说明。
表 9.1 DOM Level 1 的模块一览
| 模块 | 说明 |
|---|---|
| Core | 对包括HTML 在内的基本DOM 操作提供支持 |
| HTML | 对一些专用于HTML 文档的方法提供支持 |
表 9.2 DOM Level 1 Core
| 方法名 | 说明 |
|---|---|
| getElementsByTagName | 根据指定的标签名来获取元素 |
| createElement | 创建新元素 |
| appendChild | 插入元素 |
9.1.2 DOM Level 2
与 DOM Level 1 相比，DOM Level 2 中包含了很多模块。其中包括 Events 这样与addEventListener()等事件处理方法相关的模块，或者 DOM Level 1 中 Core 模块以及 HTML 模块的扩展模块。
CSS 也是在 DOM Level 2 中定义的模块。可惜的是，Internet Explorer 8 以及更早的版本并没有遵循DOM Level 2 标准。而 Firefox 或 Google Chrome 等现代浏览器则几乎完全支持 DOM Level 2。
表 9.3 DOM Level 2 所包含的模块一览
| 模块 | 说明 |
|---|---|
| Core | Level 1 Core 的扩展 |
| HTML | Level 1 HTML 的扩展 |
| Views | 对与文档显示状态相关的功能提供支持 |
| Events | 对捕获、冒泡、取消等事件系统提供支持 |
| Styles | 对与样式表相关的功能提供支持 |
| Traversal and Range | 对DOM 树的遍历以及范围的指定提供支持 |
9.1.3 DOM Level 3
DOM Level 3 是由表 9.4 中所示的模块所组成的，其中 Events 模块还没有达到推荐使用的程度。不过在现代浏览器中，Event 模块中所定义的一些内容已经提前实现。
表 9.4 DOM Level 3 所包含的模块一览
| 模块 | 说明 |
|---|---|
| Core | Level 2 Core 的扩展 |
| Load and Save | 对文档内容的读取与写入提供支持 |
| Validation | 对文档内容合法性的验证提供支持 |
| XPath | 对XPath 相关的功能提供支持 |
| Events | Level 2 Events 的扩展。对键盘事件提供了支持 |
专栏
DOM Level 0
在 DOM 标准制定之前，各种浏览器所采用的对象模型被称为 DOM Level 0。DOM Level 0 也称为传统 DOM。虽然 DOM Level 0 并不能算是一种被正确定义的标准，但为了与过去的浏览器相兼容，现在的浏览器中仍然支持 DOM Level 0 中的功能。DOM Level 0 中含有 Window、Document、Navigator、Location、History 等对象。不过，在 Document 对象中也有一些在 DOM Level 1 中被定义的 API，所以不能说以上这些对象都是属于DOM Level 0 的内容。
此外，虽然 DOM Level 0 并不能算是一种标准，但是它所包含的一些对象却是符合 HTML5 标准的。很多过去由浏览器开发商自主实现的功能现在也都成为了标准。还有一些功能虽然还没有成为标准，但也已经处于标准起草阶段了。这些由浏览器开发商自主实现的功能为了不与 DOM 标准中所定义的属性名或名称冲突，常常会根据开发商的不同分别在名称前加上前缀。其中的很多被用于 CSS 的属性或 JavaScript 的函数名中。例如，在 Firefox中使用了 moz 这一前缀，而在 Google Chrome 与 Safari 所使用的 WebKit 中则使用了 webkit 这一前缀。
9.1.4 DOM 的表述方式
可以通过下面的方式书写 DOM。
接口名·方法名()
接口名·属性名
虽然这种写法会使 DOM 的书写变得冗长，但以这样的方式书写 JavaScript 代码就可以清楚地知道正在对哪一个接口的对象进行操作，将有助于增进对代码的理解。所以还是应采用这种方法。同时，在方法名之后接上 () 之后，就能够清楚地知道该元素是一个方法。
