快车道系列：理解文档对象模型DOM

DOM是什么？

Document Object Model^[0]，简称DOM, 文档对象模型， 是一套抽象的、单一的、具有一致性的API。这一套API是与具体实现和具体语言无关的。在WHATAG CORE 3 Living Standard^[1]上通过Web IDL定义给出。

HTML和定义良好的XML都是结构化，里面的内容、表现、属性都可以通过节点和对象的方式来表示，形成一棵树形结构（或者是森林）。而DOM所定义的API就是用来访问、操作、修改里面的数据。

举个例子：

<TABLE>
<ROWS> 
<TR> 
<TD>Shady Grove</TD>
<TD>Aeolian</TD> 
</TR> 
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD> 
</TR> 
</ROWS>
</TABLE>

那么，如果用DOM模型来表示这个表格，就应该下面这个样子的：

DOM中的对象就是传统意义上面向对象设计中的意思，在DOM语义中，节点不仅仅是树状的结构，还表示了这个节点所代表的各种操作和组成它的各种数据（比如它有子节点，有属性，有各种Function, 有自己的标识）。 DOM定义了如下3个方面：

• 表示和操作文档的接口和对象
• 这些接口和对象的语义（包括行为和属性）
• 这些接口和对象之间的关系和协作

DOM标准的版本

DOM 1 级

1998 年 10 月，W3C 推出 DOM 1.0 版本规范，作为推荐标准进行正式发布，主要包括两个子规范。

• DOM Core（核心部分）：把 XML 文档设计为树形节点结构，并为这种结构的运行机制制订了一套规范化标准，同时定义了创建、编辑、操纵这些文档结构的基本属性和方法。
• DOM HTML：针对 HTML 文档、标签集合，以及与个别 HTML 标签相关的元素定义了对象、属性和方法。

DOM 2 级

2000 年 11 月，W3C 正式发布了更新后的 DOM 核心部分，并在这次发布中添加了一些新规范，于是人们就把这次发布的 DOM 称为 2 级规范。

2003 年 1 月，W3C 又正式发布了对 DOM HTML 子规范的修订，添加了针对 HTML 4.01 和 XHTML 1.0 版本文档中很多对象、属性和方法。W3C 把新修订的 DOM 规范同义称为 DOM 2.0 推荐版本，该版本主要包括 6 个推荐子规范。

• DOM2 Core：继承于 DOM Core 子规范，规定了 DOM 文档结构模型，添加了更多的特性，如针对命名空间的方法等。
• DOM2 HTML：继承于 DOM HTML，规定了针对 HTML 的 DOM 文档结构模型，并添加了一些属性。
• DOM2 Events：规定了与鼠标相关的事件（包括目标、捕获冒泡和取消）的控制机制，但不包含与键盘相关事件的处理部分。
• DOM2 Style（或 DOM2 CSS）：提供了访问和操纵所有与 CSS 相关的样式及规则的能力。
• DOM2 Traversal 和 DOM2 Range：DOM2 Traversal 规范允许开发人员通过迭代方式访问 DOM，DOM2 Range 规范允许对指定范围的内容进行操作。
• DOM2 Views：提供了访问和更新文档表现（视图）的能力。

DOM 3 级

2004 年 4 月，W3C 发布了 DOM3 版本。DOM3 版本主要包括以下 3 个推荐子规范。

• DOM3 Core：继承于 DOM2 Core，并添加了更多的新方法和属性，同时修改了已有的一些方法。
• DOM3 Load and Save：提供将 XML 文档的内容加载到 DOM 文档中，以及将 DOM 文档序列化为 XML 文档的能力。
• DOM3 Validation：提供了确保动态生成的文档的有效性的能力，即如何符合文档类型声明。

DOM CORE之外的扩展

DOM标准定义了核心DOM的模型和接口。但是不同的厂商和语言特定的库都对DOM做了扩展。有的专门用来解析XML DOM。有的用来解析HTML DOM。比如在Java中就有JDOM、DOM4J等库来解析DOM。

DOM的基本类型

以下表格参考^[2]：

如何用Javascript操作HTML

下面给出一段代码，在浏览器中直接操作HTML DOM。其中整个DOM对象直接通过document全局变量获得。

const p1 = document.createElement("p");
const p1_text = document.createTextNode(xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue);
p1.appendChild(p1_text);

const p2 = document.createElement("p");
const p2_text = document.createTextNode(xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue);
p2.appendChild(p2_text);

const p3 = document.createElement("p");
const p3_text = document.createTextNode(xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue);
p3.appendChild(p3_text);

var nodeEle = document.getElementsByClassName('note');

var body = document.body;
body.appendChild(p1);
body.appendChild(p2);
body.appendChild(p3);

TO BE CONTINUED

---

1. 0.https://www.w3.org/TR/DOM-Level-2-Core/introduction.html ↩
2. 1.https://dom.spec.whatwg.org/ ↩
3. 2.https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction ↩