本节提供了一个简单的概念性的DOM介绍：DOM是什么, 它是如何组织 HTML 及 XML 文档，你要如何访问它，这个API提供了那些参考信息和实例。

什么是 DOM?

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。

W3C DOM 标准在绝大多数现代浏览器中都有对DOM的基本实现。许多浏览器提供了对W3C标准的扩展，所以在使用时必须注意，文档可能会在多种浏览器上使用不同的DOM来访问。

例如，W3C DOM 中指定下面代码中的getElementsByTagName方法必须要返回所有<P> 元素的列表：

paragraphs = document.getElementsByTagName("P");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

所有操作和创建web页面的属性，方法和事件都会被组织成对象的形式（例如， document 对象表示文档本身， table 对象实现了特定的 HTMLTableElement DOM 接口来访问HTML 表格等）。本文会介绍基于 Gecko浏览器的 DOM 面向对象引用。

DOM 和 JavaScript

上面简短的示例和这个参考文档中几乎所有的示例一样，都使用了JavaScript。也就是说，它的语言是JavaScript，但却用在 DOM 上来访问文档和其中的元素。DOM 并不是一个编程语言，但如果没有DOM， JavaScript 语言也不会有任何网页，XML页面以及涉及到的元素的概念或模型。在文档中的每个元素— 包括整个文档，文档头部，文档中的表格，表头，表格中的文本 — 都是文档对应的文档对象模型的一部分，因此它们可以使用DOM和一个脚本语言如 JavaScript，来访问和处理。

开始的时候，JavaScript和DOM是交互在一起的，但它们最终演变成了两个独立的实体。页面内容会存储在DOM中，可能会被JavaScript访问和操作，因此我们可以写成这个近似的等式：

API (web 或 XML 页面) = DOM + JS (脚本语言)

DOM 被设计成与特定编程语言相独立，使文档的结构化表述可以通过单一，一致的API获得。尽管我们在本参考文档中会专注于使用JavaScript，但DOM 也可以使用其他的语言来实现，以Python为例，代码如下：

# Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");

要获取更多在网页上使用JavaScript的信息，可以参考 JavaScript technologies overview.

如何访问 DOM?

在使用DOM时，您不需要做任何其他特殊的操作。不同的浏览器都有对DOM不同的实现，这些实现对当前的DOM标准而言，都会呈现出不同程度的一致性，每个web浏览器都会使用一些文档对象模型，从而使页面可以被脚本语言访问。

当您在创建一个脚本时-无论是使用内嵌 <script>元素或者使用在wenb页面脚本加载的方法— 您都可以使用 document 或 window 元素的API来操作文档本身或获取文档的子类（web页面中的各种元素）。

您的DOM编程代码可能会像下面例子一样非常简单，如使用 window 对象的 alert()函数显示一个警告信息，或者使用比较复杂的方法来创建一个新的内容，如下面内容较长的实例所示。

<body onload="window.alert('welcome to my home page!');">

除了定义 JavaScript的 <script> 元素外，当文档被装载（以及当整个DOM可以被有效使用时），JavaScript可以设定一个函数来运行。下面的函数会创建一个新的 H1元素，为元素添加文本，并将H1添加在文档树中。

<html>
  <head>
    <script>
    // run this function when the document is loaded
       window.onload = function() {
    // create a couple of elements 
    // in an otherwise empty HTML page
       heading = document.createElement("h1");
       heading_text = document.createTextNode("Big Head!");
       heading.appendChild(heading_text);
       document.body.appendChild(heading);
      }
    </script>
  </head>
  <body>
  </body>
</html>

重要的数据类型

本参考文档会试图以尽可能简单的方式描述各种对象和类型。但在API中传入的不同的数据类型需要我们去注意。为简单起见，在API参考文档中的语法实例通常会使用element(s) 指代节点，使用nodeList（s）或 element(s)来指代节点数组，使用 attribute(s)来指代属性节点。

下面的表格简单则描述了这些数据类型。

`document`	当一个成员返回 `document` 对象（例如，元素的 ownerDocument 属性返回它所属于 `document`) ，这个对象就是 `document` 对象本身。 DOM `document`Reference 一章对 `document` 对象进行了描述。
`element`	`element` 是指由 DOM API 中成员返回的类型为 element 的一个元素或节点。例如， `document.createElement()` 方法会返回一个 `node` 的对象引用，也就是说这个方法返回了在DOM中创建的 `element`。 `element` 对象实现了 DOM`Element` 接口以及更基本的 `Node` 接口，参考文档将两者都包含在内。
`nodeList`	`nodeList` 是一个元素的数组，如从 `document.getElementsByTagName()方法返回的就是这种类型。` `nodeList` 中的条目由通过下标有两种方式进行访问： list.item(1) list[1] 两种方式是等价的，第一种方式中 `item()` 是 `nodeList` 对象中的单独方法。后面的方式则使用了经典的数组语法来后去列表中的第二个条目。
`attribute`	当 `attribute` 通过成员函数 (例如，通过 `createAttribute()方法`) 返回时，它是一个为属性暴露出专门接口的对象引用。DOM中的属性也是节点，就像元素一样，只不过您可能会很少使用它。
`namedNodeMap`	`namedNodeMap` 和数组类似，但是条目是由name或index访问的，虽然后一种方式仅仅是为了枚举方便，因为在 list 中本来就没有特定的顺序。出于这个目的， `namedNodeMap` 有一个 item() 方法，你也可以从 `namedNodeMap 添加或移除条目。`

DOM 接口

本指南对您可以用来操作DOM层级的对象以及事物进行了介绍。 HTML FORM 元素从 HTMLFormElement 接口中获取 name 属性和从 HTMLElement 接口中获取 className 属性是没有多少差别的。在上面情况中，您要获取的属性都只在form对象中。

但是由DOM实现的对象和接口间的关系是容易被混淆的，因此本节会尝试去对DOM 标准中的一些常用的接口进行说明以及它们是怎样有效的。

接口及对象

许多对象会对多个不同的接口进行实现。例如，table对象实现了 HTML Table Element Interface, 其中包 createCaption 和 insertRow 方法。但由于table对象也是一个HTML元素， table 也实现了 Element 接口（在 DOM element Reference 一章有对应描述）。最后，由于HTML元素对DOM来说也是组成web页面或XML页面节点树中的一个节点， table元素也实现更基本的 Node 接口， Element 对象即发源于此接口。

正如下面的例子，当您得到一个 table 对象的引用时，您经常会轮流使用对象上的三个不同的接口函数，但或许并不知道上面的分析。

var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for (var i = 0; i < tableAttrs.length; i++) {
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1"; 
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";

DOM中核心接口

本节列出了在DOM中最常用的一些接口。此处并不会描述这些APIs在做什么，但是会让您了解当您使用DOM时常用的各种方法和属性。这些常用的API会在本文档最后的 DOM Examples 章节中较长的实例中有使用。

您在DOM编程时，通常使用的最多的就是 Document和 window 对象。简单的说， In simple terms, the window 对象表示浏览器中的内容，而 document 对象是文档本身的根节点。Element 继承了通用的 Node 接口, 将这两个接口结合后就提供了许多方法和属性可以供单个元素使用。在处理这些元素所对应的不同类型的数据时，这些元素可能会有专用的接口，如上节中的 table 对象的例子。

下面是在web和XML页面脚本中使用DOM时，一些常用的API简要列表。

document.getElementById(id)
element.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute
element.getAttribute
element.addEventListener
window.content
window.onload
window.dump
window.scrollTo

测试DOM API

本文档提供了每一个接口的样本示例，您可以在自身进行web开发时使用。在有些情况下，样例是一个完整的HTML页面，其中使用 In some cases, the samples are complete HTML pages, with the DOM access in a <script> 元素标签进行DOM访问, 包含必须的接口 (如 buttons)来触发表单中的脚本，以及DOM所操作的HTML元素。此时，您可以将实例进行剪切和复制到一个新的HTML文档中，保存完成后，在浏览器中运行该实例。

There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <script> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.

You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the test() function as needed, create more buttons, or add elements as necessary.

<html>
  <head>
    <title>DOM Tests</title>
    <script type="application/javascript">
    function setBodyAttr(attr,value){
    if (document.body) eval('document.body.'+attr+'="'+value+'"');
    else notSupported();
    }
    </script>
  </head> 
  <body>
    <div style="margin: .5in; height: 400;"> 
      <p><b><tt>text</tt>color</b></p> 
      <form> 
        <select onChange="setBodyAttr('text',
        this.options[this.selectedIndex].value);"> 
          <option value="black">black 
          <option value="darkblue">darkblue 
        </select>
        <p><b><tt>bgColor</tt></b></p>
        <select onChange="setBodyAttr('bgColor',
        this.options[this.selectedIndex].value);"> 
          <option value="white">white 
          <option value="lightgrey">gray
        </select>
        <p><b><tt>link</tt></b></p> 
        <select onChange="setBodyAttr('link',
        this.options[this.selectedIndex].value);">
          <option value="blue">blue
          <option value="green">green
        </select>  <small>
        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
        (sample link)</a></small><br>
      </form>
      <form>
        <input type="button" value="version" onclick="ver()" />
      </form>
    </div>
  </body>
</html>

To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.

Figure 0.1 Sample DOM Test Page Image:DOM_Ref_Introduction_to_the_DOM.gif

In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (bgColor), the color of the hyperlinks (aLink), and color of the text (text). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.

附件

文件	大小	日期	附加者为
boxdet1.png	5001 字节	2006-08-25 09:06:53	Ptak82
DOM_Ref_Introduction_to_the_DOM.gif	11751 字节	2005-06-15 04:37:11	Callek

文档标签和贡献者

对本页有贡献的人： ziyunfei, ReyCG_sub, Darrel.Hsu

最后编辑者: ReyCG_sub, Jun 18, 2014 6:05:19 AM

MDN 文档对象模型 (DOM) - DOM概述

什么是 DOM?

DOM 和 JavaScript

如何访问 DOM?

重要的数据类型

DOM 接口

接口及对象

DOM中核心接口

测试DOM API

附件

文档标签和贡献者

DOM概述

热门文章

最新文章

相关电子书