跳到主要内容

DOM

当一个 HTML 网页被加载到浏览器中时，浏览器会首先解析该网页文档，将其解析为文档对象模型（ Document Object Model, DOM ）。

DOM 是 W3C 制定的一个规范，是独立于平台和语言的一系列接口定义，应用程序通过实现这些接口，使用户可以通过固定的方式访问和修改文档的内容、结构和样式，而不论使用哪种语言编写应用程序，也不论在哪个平台上运行应用程序。这有利于不同软件之间的相互兼容，从而有利于降低开发和创作成本。例如，如果所有的浏览器都支持使用 DOM 接口定义的方法来处理 HTML 文档中的内容、结构和样式，那么对于网页创作者来说，就可以大大降低因为考虑浏览器兼容性所花费的时间和成本。

对于 HTML 网页，文档对象模型是 HTML 文档在内存中的表示形式，它是一个应用程序接口，定义了该文档的逻辑结构以及一套访问和处理文档的方法。例如，客户端浏览器是一个处理 HTML 文档的应用程序，它必须将 HTML 文档解析成 DOM 才能够以编程方式读取、操作和呈现 HTML 文档。

了解 DOM​

DOM （文档对象模型）既可以用于处理 HTML 文档，也可以用于处理 XML 文档。并且， DOM 有多个版本： Level1、 Level2和 Level3，每个版本都是对前一版本的提高，最早的 Level1仅包含 DOM HTML 和 DOM Core ，而 DOM Level2规范簇包含如下6个规范：

  • Document Object Model Level 2 Core
  • Document Object Model Level 2 Views
  • Document Object Model Level 2 Events
  • Document Object Model Level 2 Style
  • Document Object Model Level 2 Traversal and Range
  • Document Object Model Level 2 HTML

目前，大部分浏览器软件都可以部分或全部实现 DOM Level2 规范簇， HTML5DOM API 也都是大量基于 DOM Level2 规范簇的，这也是本书为何介绍 DOM Level2的原因。

DOM 是文档在内存中的表示形式，它是一个应用程序接口，定义了该文档的逻辑结构以及一套访问和处理文档的方法。例如，客户端浏览器是一个处理 HTML 和 XML 文档的应用程序，它必须将 HTML 或 XML 文档解析成 DOM 才能够以编程方式读取、操作和呈现 HTML 或 XML 。

访问 http:www.w3.org/2003/02/06-dom-support.html页面,会自动显示当前浏览器对 DOM 的支持情况。在于符合标准的 DOM 合作方面， IE （早期版本）的怪异模式是最差的，仅支持 HTML 1.0 模块。

DOM 基于节点树的表现形式​

DOM 文档中的逻辑结构可以用节点树的形式进行表述，通过对 HTML 文件的解析处理， HTML 文件中的元素便转化为 DOM 文档中的节点对象，而 DOM 文档中的树形结构也被称为 HTML 文档树。

DOM 的文档节点有 Document 、 Element 、 Comment 、 Type 、 Text 等类型，其中，每一个 DOM 文档必须有一个 Document 节点，作为节点树的根节点。 html 元素就是根节点，它可以有子节点或者属性节点，如 Text 、 Comment 类型的节点等。任何格式良好的 HTML 文件中的每一个元素均有 DOM 文档中的一个节点类型与之对应。

DOM 基于节点的浏览使用与 HTML 文档对象模型相同的格式描绘 HTML 文档对象（ DOM ），实际上，一个 HTML 文档对象就代表一个 DOM 对象。

使用 DOM 查看器​

在 DOM 基于节点的浏览中，文档包含了节点层级树：每一节点包含一个 DOM 节点类型、一个节点名和一个节点值。节点类型包括元素、注释、文字等。 DOM 将文档对象和它包含的每一个元素构造进多个不同类型的节点，并提供了可视化的文档结构图。使用 Firefox 浏览器提供的"DOM 查看器"窗口，可以清楚地查看 HTML 文档的 DOM 信息。

关于节点类型​

注意，节点中有很多空白字符构成的文本节点（名为#text ），在使用 DOM 方法处理文档时需要注意这些节点，主要是对节点类型做出判断。

  • DOCTYPE: html
  • html
  • head
  • #text:
  • title
  • #text: Sample page
  • #text:
  • #text:
  • body
  • #text:
  • h1
  • #text: Sample page
  • #text:
  • li
  • #text: This is a
  • a href ="demo.html "
  • #text: simple
  • #text: sample.
  • #text:
  • #comment: this is a comment
  • #text:

HTML DOM​

核心 DOM 也是 W3C 制定的规范，但 HTML DOM 定义了用于操作 HTML 文档的专用 API ，是对核心 DOM 的扩展。目前主流的浏览器都支持 HTML DOM ，这也是实现跨浏览器操作的关键。相对于核心 DOM ，制定 HTML DOM 的主要目的在于：

  • 指定和添加特用于 HTML 文档和元素的 API
  • 实现与 DOM Level 0的兼容
  • 提供一种便利的机制，适于对 HTML 文档的一般性操作

这里提到的 DOM Level 0没有特定的规范，一般是指对 Netscape Navigator version 3.0和 Microsoft Internet Explorer version 3.0所提供的动态操控 HTML 文档功能的一种混合的称呼。直到目前为止，为了和 DOM Level 0 兼容，很多属性和方法仍被采用，而且大多数浏览器都支持这些方法和属性。

HTML DOM 和核心 DOM 的区别与联系​

HTML DOM 和核心 DOM 的不同之处在于： HTML DOM 提供了大量便利的方法和属性，这些方法和属性与现有的程序模型一致，更便于脚本编写者控制。

HTML DOM 的很多对象模型来自于核心 DOM ，例如， HTMLDocument 接口继承自核心 DOM 的 Document 接口，但 HTMLDocument 包含有专用于 HTML 文档操作的方法和属性， window.document 对象是接口的实现； HTMLElement 接口继承自核心 DOM 的 Element 接口，但 HTMLElement 包含有专用于 HTML 元素操作的方法和属性，使用这些方法和属性可以便利地获取和修改 HTML 元素。

在 HTML DOM 中，使用特殊的字符串表示一些基本数据类型。

什么是接口​

信息技术领域内的接口（ Interface ）是标准和规范在程序开发中的一个表达形式。

在软件领域内，最常看到的接口定义是面向对象开发语言中使用 interface 关键字所定义的接口，它经常与使用 class 关键字定义的类联系在一起，但是要记住的是，接口是规范，类是实现。

之所以在面向对象开发领域中定义 interface ，是为了更便于表达规范，从而使开发者更容易理解。例如 HTMLDocument 接口就是一个接口定义，所有的开发者都可以清楚地理解该接口所定义的成员，从而根据该接口定义实现。在面向对象开发的语言中，接口的实现也就是类，或者说类是接口的实现。

在硬件领域中，接口经常表现为一种物理形态，例如 USB 接口、 PS2接口、打印机接口等，虽然这些接口的物理形态各不相同，但是作为一个开发人员，应该认识到，这些物理形态是为了便于非专业人员使用而制造的，接口本质上还是为软件开发者编写驱动而定义的规范。

每个 HTML 元素都使用一个接口来描述，接口中定义了该元素可以使用程序代码动态控制的方法、属性和事件，例如下面是 Object 元素接口的定义：

interface HTMLObjectElement: HTMLElement {
    attribute DOMString data;
    attribute DOMString type;
    attribute DOMString name;
    attribute DOMString useMap;
    readonly attribute HTMLFormElement form;
    attribute DOMString width;
    attribute DOMString height;
    readonly attribute Document contentDocument;
    readonly attribute WindowProxy contentWindow;
    readonly attribute boolean willValidate;
    readonly attribute ValidityState validity;
    readonly attribute DOMString validationMessage;
    boolean checkValidity();
    void setCustomValidity(in DOMString error);
}

该接口继承 HTMLElement 接口， HTMLElement 接口是所有 HTML 元素的基接口。 HTML 元素接口的命名有些规则可循（元素名首字母大写）：

HTML 元素名 Element 。

接口中属性定义使用 attribute 标示，紧跟其后的是该属性值的数据类型，例如 data 就是一个属性，属性值的数据类型是 DOMString ：

    attribute DOMString data;

事件定义使用 attribute 标示，但紧跟其后的是 Function 关键字，例如 onabort 事件的定义如下：

    attribute Function onabort;

方法定义不使用 attribute 标示，表示为返回值和方法签名，如果该方法没有返回值，那么就使用 void 关键字来标示。例如下面就是一个方法定义：

void setCustomValidity(in DOMString error);

文档对象类型​

文档对象类型(Document Object Model,DOM)是针对 XML 但经过扩展应用于 HTML 的应用程序编程序接口(API)。

借助 DOM 提供的 API ，开发人员可以自如地添加、删除、替换、修改任何节点 。

  • DOM 视图（ DOM Views ）：定义跟踪不同文档视图接口

  • DOM 事件（ DOM Events ）：定义了事件和事件的处理接口

  • DOM 样式（ DOM Style ）：定义基于 CSS 为元素的应用样式接口

  • DOM 遍历和范围（ DOM Traversal and Range ）：定义遍历和操作文档树的接口

    除了 DOM 核心和 DOM HTML 接口之外，另外几种语言还发布了针对自己的 DOM 接口 。

  • SVG 可伸缩矢量图

  • Mathematical Markup Language 数学标记语言

  • SMIL 同步多媒体集成语言

Document 对象代表浏览器窗口中的文档。该对象是 Window 对象的子对象。由于 Window 对象是 DOM 对象模型中的默认对象，因此 Window 对象中的方法和子对象不需要使用 Window 来引用。通过 Document 对象可以访问 HTML 文档中包含的任何 HTML 标记，并可以动态地改变 HTML 标记中的内容，如表单、图像、表格和超链接等。

"文档对象模型"（ Document Object Model ， DOM ）是对文档及其内容的抽象表示。

Document （文档）对象是浏览器 Window （窗口）对象的一个主要部分。它包含了网页显示的各个元素对象，是最常用的对象之一。

每次浏览器要加载和显示页面时，都需要解释（更专业的术语是"解析"）构成页面的 HTML 源代码。在解析过程中，浏览器建立一个内部模型来表示文档里的内容，这个模型就是 DOM 。在浏览器渲染页面的可见内容时，就会引用这个模型。可以使用 JavaScript 来访问和编辑这个 DOM 的各个部分，从而改变页面的显示内容和用户交互的方式。

只有当页面完成加载之后， DOM 才是可用的。在这之前不要执行关于 DOM 的语句，否则很可能导致错误。

window 和 document 对象​

中 window 对象的其它子对象还有 location （包含着当前页面 URL 的详细信息）、 history （包含浏览器以前访问的页面地址）和 navigator （包含浏览器类型、版本和兼容的信息）。

document 对象​

使用 window.document 属性可以返回一个 document 对象，它代表当前 window 或指定 window 对象内加载的文档。

用户可以使用下面的语法格式访问一个窗口内的 document 对象：

theWindow.document;

其中， theWindow 是一个窗口的名称，对于当前窗口，可以使用下面的语法访问 document 对象：

window.document;

由于 window 可以省略，所以经常用 document 就可以直接访问当前文档的 document 对象。