【SSD系列】DOM0, DOM1, DOM2, DOM3, DOM4，知多少

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战。

前言

关于关于【SSD系列】：
前端一些有意思的内容，旨在3-10分钟里， 500-1500字，有所获，又不为所累。

DOM是前端工程师必修技能，DOM到底涵盖多少东西呢？

DOM Living Standard 这里有最新的DOM标准，不妨收藏一下。

什么是DOM

DOM（文档对象模型）是针对 HTML和 XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM 脱胎于Netscape及微软公司创始的 DHTML（动态 HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。

DOM0

JavaScript在早期版本中提供了查询和操作Web文档的内容API（如：图像和表单），在JavaScript中定义了定义了'images'、'forms'等，因此我们可以像下这样访问第一张图片或名为“user”的表单：

document.images[0]
document.forms['user']

这实际上是未形成标准的试验性质的初级阶段的DOM，现在习惯上被称为DOM0

还有我们所熟知的onclick事件，也是与DOM0级的事件。

DOM0级别的事件优点：

1. 效率高

2. 可以被Node.clone克隆

3. 移除事件非常简单

   container.onclick=null即可

4. 有点也是缺点，唯一性

多次复制会被覆盖

当然其他onxxx事件也是，而我们熟知的addEventListener则属于DOM2级别事件。

<div id="container" onclick="log1();log2()">点我</div>
<script>	
	function log1() {
		console.log('log1......');
	}
	function log2() {
		console.log('log2......');
	}
	
	// 移除事件
	container.onclick = null
	
</script>

DOM1

大家熟知的Node，document, document.createElement都是在DOM1级别定义的。

更多关于知识，详见Document Object Model (DOM) Level 1 Specification。

1998年 10月DOM1级规范成为W3C的推荐标准，为基本的文档结构及查询提供了接口，专注于HTML文档和XML文档。

在DOM1中，DOM由两个模块组成：DOM Core（DOM核心）和DOM HTML。其中，DOM Core规定了基于XML的文档结构标准，通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法，如：JavaScript中的Document对象

每个节点都有nodeType属性，表示该节点的类型。

在Node类型上的12个数值常量表示：

DOM2

我们熟知的·addEventListner, document.body.style， getElementById这些都是DOM2级别的东西。

• DOM2级核心（DOMLevel2 Core）

  详情参见 DOM-Level-2-Core Overview , DOM-Level-2-Core 和 DOM-Level-2-Core Changes

  在 1级核心基础上构建，为节点添加了更多方法和属性。

  例如 importNode, createElementNS, createAttributeNS, getElementsByTagNameNS and getElementById等等

• DOM2级视图（DOM Level2 Views）

  详情参见 DOM-Level-2-Views Overview

  为文档定义了基于样式信息的不同视图。

  我们常用的就是document.defaultView，其返回文档所在的Window。

• DOM2 级事件（DOM Level2 Events）

  详情参见 DOM-Level-2-Events Overview

  说明了如何使用事件与 DOM文档交互。

  我们比较熟悉的就是 addEventListner， 基于EventTarget的整个事件系统都是DOM2定义的。

• DOM2级样式（DOM Level 2 Style）

  详情参见 DOM-Level-2-Style Overview

  定义了如何以编程方式来访问和改变 CSS 样式信息。

比如我们常见 CSSStyleDeclaration 和CSSStyleSheet 这些重要的对象，别说你没用过？ document.body.style其返回的就是CSSStyleDeclaration.

• DOM2级遍历和范围（DOM Level2Traversal and Range）

  ​ 详情参见DOM-Level-2-Traversal-Range Overview

  ​ 引入了遍历 DOM文档和选择其特定部分的新接口。

  比如： createTreeWalker 与 createNodeIterator 这两个节点遍历方法，大家可能比较陌生：

const nodeIterator = document.createNodeIterator(
    document.body,
    NodeFilter.SHOW_ELEMENT,
    {
      acceptNode(node) {
       return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
     }
   }
);
const pars = [];
let currentNode;

while (currentNode = nodeIterator.nextNode()) {
  pars.push(currentNode);
}

• DOM2级HTML（DOMLevel2HTML）

  ​ 详情参见 DOM-Level-2-HTML Overview

  其扩展了 DOM Level 2 Core API [ DOM Level 2 Core ] ，以描述特定于 HTML 文档[ HTML 4.01]和 XHTML 文档[ XHTML 1.0]的对象和方法。

  一般来说，操作层次化文档结构、元素和属性所需的功能将在核心部分中找到; 依赖于 HTML 中定义的特定元素的功能将在本部分中找到。

HTMLOptionsCollection就是新增的， 你别说不知道，其就是<option>节点的集合。DOMImplementation 接口的 hasFeature可还记得，也是哦。

DOM3

详情可参见 DOM-Level-3-Core Overview， DOM-Level-3-Core 和 DOM-Level-3-Core Changes。

它完成了 DOM 和 XML信息集文档之间的映射，包括对 XML Base [ XML Base ]的支持，增加了向 DOM Nodes 附加用户信息，提供了解析名称空间前缀或操作“ ID”属性的机制等等。

• DOM加载和保存模块（DOM Load and Save）：引入了以统一方式加载和保存文档的方法
• DOM验证模块（DOM Validation）：定义了验证文档的方法
• DOM核心的扩展（DOM Style）：支持XML 1.0规范，涉及XML Infoset、XPath和XML Base

DOM4

2015年11月19日， DOM4发布，详情可参见 W3C DOM4。

DOM4增加了 Mutation Observers ，作为原来 Mutation Events的替代。

小结

先提个问题，我们常说的HTML5是 2008年发布的，他应该和DOM几对应你？

1. onclick 系列是DOM0级别的事件，只能有一个函数，一定条件下可以被复制
2. addEventListener系列是DOM2级别的事件
3. XPath 属于DOM3级别的东西，平时并不常见，其也可用于遍历节点。
4. DOM4，增加了观察节点变化的能力。

综上可见，DOM1, DOM2是核心，其余的我们使用并不多。

写在最后

不忘初衷，【SSD系列】，3-5分钟，500-1000字，有所得，而不为所累，如果你觉得不错，你的一赞一评就是我前行的最大动力。

技术交流群请到 这里来。 或者添加我的微信 dirge-cloud，一起学习。