DOM - 我们了解它了吗?-阿里云开发者社区

开发者社区> 开发与运维> 正文

DOM - 我们了解它了吗?

简介: ajax应用我们遇到的很多,但对于其中的DOM技术,是否了解了呢?看如下的资料: 官网 实际的 DOM 推荐标准是一个 API,它定义了 XML 文档中出现的对象,以及用于访问和处理这些对象的方法和属性。



实际的 DOM 推荐标准是一个 API,它定义了 XML 文档中出现的对象,以及用于访问和处理这些对象的方法和属性。 【The DOM is a set of web standards that describes how your script can interact with and access the structured document. DOM defines the objects, methods, and properties that are required to access, manipulate, and create the content, structure, style, and behavior in your documents.】




DOM 被分为3中不同的部分/级别:

Core DOM-定义了一套标准的针对任何结构化文档的对象

XML DOM-定义了一套标准的针对 XML 文档的对象

HTML DOM-定义了一套标准的针对 HTML 文档的对象


从 DOM Level 1 开始,DOM API 包含了一些接口,用于表示可从 XML 文档中找到的所有不同类型的信息。它还包含使用这些对象所必需的方法和属性。

Level 1 包括对 XML 1.0 和 HTML 的支持,每个 HTML 元素被表示为一个接口。它包括用于添加、编辑、移动和读取节点中包含的信息的方法,等等。然而,它没有包括对 XML 名称空间(XML Namespace)的支持,XML 名称空间提供分割文档中的信息的能力。

DOM Level 2 添加了名称空间支持。Level 2 扩展了 Level 1,允许开发人员检测和使用可能适用于某个节点的名称空间信息。Level 2 还增加了几个新的模块,以支持级联样式表、事件和增强的树操作。

DOM Level 3 包括对创建 Document 对象的更好支持、增强的名称空间支持,以及用来处理文档加载和保存、验证以及 XPath 的新模块;XPath 是在 XSL 转换(XSL Transformation)以及其他 XML 技术中用来选择节点的手段。


“Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets, and scripts that allows documents to be animated” (

The ideas behind DOM do incorporate DHTML concepts, but DHTML includes nonstandard

objects, such as document.all, that vary from browser to browser. Yes, that’s right;  document.all as well as many other collections are not actually part of W3C standards or recommendations.

DOM Level 0

DOM 最初被当作 Web 浏览器识别和处理页面元素的方式 ―― 即在 W3C 介入之前的功能,称为 “DOM Level 0”。 【There is no DOM Level 0, so don’t go looking for Level 0 specifications. If someone is referring to “Level 0,” they’re most likely referring to a set of proprietary DHTML methods, objects, and collec-tions. These were implemented in different ways across the various browsers before there was a stan-dard specification.】

DOM Level 1

The Level 1 DOM ( is the first version of the DOM standard pub-lished as a recommendation way back in October of 1998. It’s a single specification comprised of two main parts:

Ø DOM Core : Gives you the inner workings of the generic tree node structure for XML documents along with the properties and methods required to create, edit, and manipulate the tree.

Ø DOM HTML: Gives you the objects, properties, and methods for the specific elements associ-ated with HTML documents, collections of tags, and each of the individual HTML tags

The Level 1 specification includes object definitions such as Document, Node, Attr, Element, Text, HTMLDocument, HTMLElement, and  HTMLCollection.

DOM Level 2

The Level 2 DOM (, published in November of 2000, updates the Core (DOM2 Core) and adds several other specifications. The DOM2 HTML specification was pub-lished in January of 2003 and added additional objects, properties, and methods specific to HTML 4.01 and XHTML 1.0. The DOM 2 recommendations are split into six different specifications:

Ø DOM2 Core: Like DOM Core, this gives you control of the structure of the DOM document but adds additional features, such as namespace-specific methods that you can see in the changes Appendix at

Ø DOM2 HTML: Like DOM HTML, this gives you control of HTML-specific DOM documents but includes a few additional properties as noted in the changes Appendix at

Ø DOM2 Events : This gives you control of mouse-related events including targeting, capturing, bubbling, and canceling but doesn’t contain handles for keyboard-related events.

Ø DOM2 Style: Alternatively known as DOM2 CSS, this gives you the ability to access and manip-ulate all your CSS-related styling and rules.

Ø DOM2 Traversal and Range : These give you iterative access to the DOM, so you can walk and manipulate the document as needed.

Ø DOM2 Views: This gives you the ability to access and update a representation of a document.

DOM Level 3

Ø DOM3 Core: Adds more new methods and properties to the Core as well as changing a few existing methods as outlined in the changes Appendix at

Ø DOM3 Load and Save: Gives you the ability to load the content of an XML document into your DOM document and serialize your DOM document into an XML document

Ø DOM3 Validation: Allows you to ensure your dynamic document is valid and conforms to the doctype

Ø DOM3 Events : Will give access to keyboard- and mouse-related events

Ø DOM3 XPath: Will give access to the DOM document’s tree structure using XPath 1.0 queries (

Ø DOM3 Views and Formatting and DOM3 Abstract Schemas: Will allow you to  dynamically access and update the content, structure, and style of documents

DOM Level 4



HTML DOM 定义了访问和操作HTML文档的标准方法。

The DOM2 HTML specification is rather lengthy, as it contains a specific object for every HTML element. 

Remember that the original DOM2 Core objects still apply, as each of the DOM2 HTML objects

extends from the Core object.

DOM 2 Core API接口选

interface Document : Node {

  readonly attribute DocumentType     doctype;

  readonly attribute DOMImplementation  implementation;

  readonly attribute Element          documentElement;

  Element            createElement(in DOMString tagName)


  DocumentFragment   createDocumentFragment();

  Text               createTextNode(in DOMString data);

  Comment            createComment(in DOMString data);

  CDATASection       createCDATASection(in DOMString data)


  ProcessingInstruction createProcessingInstruction(in DOMString target,

                                                    in DOMString data)


  Attr               createAttribute(in DOMString name)


  EntityReference    createEntityReference(in DOMString name)


  NodeList           getElementsByTagName(in DOMString tagname);

  // Introduced in DOM Level 2:

  Node               importNode(in Node importedNode,

                                in boolean deep)


  // Introduced in DOM Level 2:

  Element            createElementNS(in DOMString namespaceURI,

                                     in DOMString qualifiedName)


  // Introduced in DOM Level 2:

  Attr               createAttributeNS(in DOMString namespaceURI,

                                       in DOMString qualifiedName)


  // Introduced in DOM Level 2:

  NodeList           getElementsByTagNameNS(in DOMString namespaceURI,

                                            in DOMString localName);

  // Introduced in DOM Level 2:

  Element            getElementById(in DOMString elementId);






JavaScript DOM编程艺术(第2版) 


+ 订阅