JS--DOM0, DOM1, DOM2, DOM3事件的区别与详解

向右看齐 2023-10-02 17:36 3阅读 0赞

原文网址：[JS--DOM0, DOM1, DOM2, DOM3事件的区别与详解\_IT利刃出鞘的博客-CSDN博客][JS--DOM0_ DOM1_ DOM2_ DOM3_IT_-CSDN]

### 简介 ###

**说明**

本文介绍JavaScript中DOM0, DOM1, DOM2, DOM3事件级别的含义及区别。

**DOM介绍**

DOM(Document Object Model，文档对象模型)是针对HTML文档和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移出和修改页面的某一部分。

DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML）。现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

## DOM0 ##

### 简介 ###

其实并没有一种标准叫“DOMLevel 0”，这只是DOM历史中的一个参照点。

Netscape Navigator 4和IE4分别发布于1997年的6月和10月发布的DHTML，它们是未形成标准的试验性质的初级阶段的DOM，这个DOM被公认为是DOM0。

DOM0的事件的特点：

*  效率高
 *  兼容所有浏览器
 *  同一个元素的同一种事件只能绑定一个函数（后面的函数会覆盖前边的函数）

### 事件 ###

**写法**

写法1：标签

写法2：JS

**清理dom0的事件**

只需给该事件赋值为 null

## DOM1 ##

### 简介 ###

**官网**

[Document Object Model (DOM) Level 1 Specification][Document Object Model _DOM_ Level 1 Specification]

**简介**

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

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

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

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

<table> 
 <tbody> 
 <tr> 
 <td> NodeType常量 </td> 
 <td> NodeType常量值 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> Node.ELEMENT_NODE </td> 
 <td> 1 </td> 
 <td> 我们常量的div,san,input等等 </td> 
 </tr> 
 <tr> 
 <td> Node.ATTRIBUTE_NODE </td> 
 <td> 2 </td> 
 <td> 属性。 </td> 
 </tr> 
 <tr> 
 <td> Node.TEXT_NODE </td> 
 <td> 3 </td> 
 <td> 包含按字面解释的纯文本，也可能包含转义后的HTML字符 </td> 
 </tr> 
 <tr> 
 <td> Node.CDATA_SECTION_NODE </td> 
 <td> 4 </td> 
 <td> CDATA区块 </td> 
 </tr> 
 <tr> 
 <td> Node.ENTITY_REFERENCE_NODE </td> 
 <td> 5 </td> 
 <td> 在 <a href="https://link.juejin.cn?target=https://www.w3.org/TR/dom/" title="DOM4" rel="nofollow">DOM4</a>&nbsp;规范中被移除 </td> 
 </tr> 
 <tr> 
 <td> Node.ENTITY_NODE </td> 
 <td> 6 </td> 
 <td> 在 <a href="https://link.juejin.cn?target=https://www.w3.org/TR/dom/" title="DOM4" rel="nofollow">DOM4</a>&nbsp;规范里被移除 </td> 
 </tr> 
 <tr> 
 <td> Node.PROCESSING_INSTRUCTION_NODE </td> 
 <td> 7 </td> 
 <td> 用于XML文档的 <a href="https://link.juejin.cn?target=https://developer.mozilla.org/en-US/docs/Web/API/ProcessingInstruction" title="ProcessingInstruction (en-US)" rel="nofollow">ProcessingInstruction (en-US)</a>&nbsp;，例如 &lt;?xml-stylesheet ... ?&gt;&nbsp;声明 </td> 
 </tr> 
 <tr> 
 <td> Node.COMMENT_NODE </td> 
 <td> 8 </td> 
 <td> 注释 </td> 
 </tr> 
 <tr> 
 <td> Node.DOCUMENT_NODE </td> 
 <td> 9 </td> 
 <td> 表示整个HTML页面 </td> 
 </tr> 
 <tr> 
 <td> Node.DOCUMENT_TYPE_NODE </td> 
 <td> 10 </td> 
 <td> 文档类型（doctype）信息。 </td> 
 </tr> 
 <tr> 
 <td> Node.DOCUMENT_FRAGMENT_NODE </td> 
 <td> 11 </td> 
 <td> 文档片段。性能优化常用。 </td> 
 </tr> 
 <tr> 
 <td> Node.NOTATION_NODE </td> 
 <td> 12 </td> 
 <td> 在 <a href="https://link.juejin.cn?target=https://www.w3.org/TR/dom/" title="DOM4" rel="nofollow">DOM4</a>&nbsp;规范中被移除 </td> 
 </tr> 
 </tbody> 
</table>

### 事件 ###

DOM1一般只有设计规范没有具体实现。

## DOM2 ##

### 简介 ###

<table style="width:673px;"> 
 <tbody> 
 <tr> 
 <td style="width:178px;">项</td> 
 <td style="width:295px;">说明</td> 
 <td style="width:199px;">官网</td> 
 </tr> 
 <tr> 
 <td style="width:178px;">DOM2级核心（DOMLevel2 Core）</td> 
 <td style="width:295px;"> 为节点添加了更多方法和属性。 例如 importNode, createElementNS, createAttributeNS, getElementsByTagNameNS getElementById等等 </td> 
 <td style="width:199px;"><a href="https://link.juejin.cn/?target=https%3A%2F%2Fwww.w3.org%2FTR%2FDOM-Level-2-Core%2FOverview.html" title="DOM-Level-2-Core Overview" rel="nofollow">DOM-Level-2-Core Overview</a>&nbsp;,&nbsp;<a href="http://https/" title="DOM-Level-2-Core" rel="nofollow">DOM-Level-2-Core</a><a href="https://link.juejin.cn/?target=https%3A%2F%2Fwww.w3.org%2FTR%2FDOM-Level-2-Core%2Fchanges.html" title="DOM-Level-2-Core Changes" rel="nofollow">DOM-Level-2-Core Changes</a></td> 
 </tr> 
 <tr> 
 <td style="width:178px;"> DOM2级视图 （DOM Level2 Views） </td> 
 <td style="width:295px;"> 为文档定义了基于样式信息的不同视图。 常用的就是document.defaultView，其返回文档所在的Window。 </td> 
 <td style="width:199px;"><a href="https://www.w3.org/TR/DOM-Level-2-Views/Overview.html" title="Document Object Model (DOM) Level 2 ViewsSpecification" rel="nofollow">Document Object Model (DOM) Level 2 ViewsSpecification</a></td> 
 </tr> 
 <tr> 
 <td style="width:178px;"> DOM2 级事件 （DOM Level2 Events） </td> 
 <td style="width:295px;"> 说明了如何使用事件与 DOM文档交互。 常用的是 addEventListner， 基于EventTarget的整个事件系统都是DOM2定义的。 </td> 
 <td style="width:199px;"><a href="https://www.w3.org/TR/DOM-Level-2-Events/Overview.html" title="Document Object Model (DOM) Level 2 EventsSpecification" rel="nofollow">Document Object Model (DOM) Level 2 EventsSpecification</a></td> 
 </tr> 
 <tr> 
 <td style="width:178px;"> DOM2级样式 （DOM Level 2 Style） </td> 
 <td style="width:295px;"> 定义了如何以编程方式来访问和改变 CSS 样式信息。 比如常见 CSSStyleDeclaration&nbsp;和CSSStyleSheet。 document.body.style返回的就是CSSStyleDeclaration. </td> 
 <td style="width:199px;"><a href="https://www.w3.org/TR/DOM-Level-2-Style/Overview.html" title="Document Object Model (DOM) Level 2 StyleSpecification" rel="nofollow">Document Object Model (DOM) Level 2 StyleSpecification</a></td> 
 </tr> 
 <tr> 
 <td style="width:178px;">DOM2级遍历和范围（DOM Level2Traversal and Range）</td> 
 <td style="width:295px;"> 引入了遍历 DOM文档和选择其特定部分的新接口。 比如： createTreeWalker 与 createNodeIterator 这两个节点遍历方法 </td> 
 <td style="width:199px;"><a href="https://www.w3.org/TR/DOM-Level-2-Traversal-Range/Overview.html" title="Document Object Model (DOM) Level 2 Traversal and RangeSpecification" rel="nofollow">Document Object Model (DOM) Level 2 Traversal and RangeSpecification</a></td> 
 </tr> 
 <tr> 
 <td style="width:178px;">DOM2级HTML（DOMLevel2HTML）</td> 
 <td style="width:295px;"> 扩展了 DOM Level 2 Core API [ DOM Level 2 Core ] ，以描述特定于 HTML 文档[ HTML 4.01]和 XHTML 文档[ XHTML 1.0]的对象和方法。 一般来说，操作层次化文档结构、元素和属性所需的功能将在核心部分中找到; 依赖于 HTML 中定义的特定元素的功能将在本部分中找到。 <a href="https://www.w3.org/TR/DOM-Level-2-HTML/Overview.html#html-HTMLOptionsCollection" title="HTMLOptionsCollection" rel="nofollow">HTMLOptionsCollection</a>就是新增的，就是&lt;option&gt;节点的集合。DOMImplementation 接口的 hasFeature也是。 </td> 
 <td style="width:199px;"><a href="https://www.w3.org/TR/DOM-Level-2-HTML/Overview.html" title="Document Object Model (DOM) Level 2 HTMLSpecification" rel="nofollow">Document Object Model (DOM) Level 2 HTMLSpecification</a></td> 
 </tr> 
 </tbody> 
</table>

### 事件 ###

**说明**

1.  绑定事件：addEventListener(event, function, useCapture)
2.  清除事件：removeEventListener(event, function, useCapture)
3.  同一个元素的同种事件可以绑定多个函数，按照绑定顺序执行

IE下的DOM2事件通过attachEvent绑定和 detachEvent 进行移除事件，他们接收的参数都一样。事件执行过程以及写法有所不同。IE9及之后的版本都能兼容 addEventListener了。

addEvenetListener()、removeEventListener() 有三个参数：

第一个参数：事件名（如click, IE是 onclick）；  
第二个参数：事件处理程序函数；  
第三个参数：true则表示在捕获阶段调用，false表示在冒泡阶段调用。

**示例**

<div id="box">点我</div>
 <script>
 	var box = document.getElementById('box');
 	box.addEventListener('click', fun1, false);
 	box.addEventListener('click', fun2, false);
 	function fun1() {
 		console.log('方法1');
 	}
 	function fun2() {
 		console.log('方法2');
 	}
 	// 执行方法1		
 // 执行方法2
 box.removeEventListener('click', fun2, false);
 </script>

## DOM3 ##

### 简介 ###

在DOM3中引入了以下模块：

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

另外，DOM3级事件在DOM2级事件的基础上添加了更多的事件类型

### 事件 ###

DOM3级事件在DOM2级事件的基础上添加了更多的事件类型。

DOM3级也允许开发人员自定义事件。

DOM3级事件添加的事件类型如下：

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#c1e6c6;"> 事件类型 </td> 
 <td style="background-color:#c1e6c6;width:321px;"> 说明 </td> 
 <td style="background-color:#c1e6c6;width:269px;"> 举例 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#c1e6c6;"> UI事件 </td> 
 <td style="background-color:#c1e6c6;width:321px;"> 当用户与页面上的元素交互时触发 </td> 
 <td style="background-color:#c1e6c6;width:269px;"> load、scroll </td> 
 </tr> 
 <tr> 
 <td style="background-color:#c1e6c6;"> 焦点事件 </td> 
 <td style="background-color:#c1e6c6;width:321px;"> 当元素获得或失去焦点时触发 </td> 
 <td style="background-color:#c1e6c6;width:269px;"> blur、focus </td> 
 </tr> 
 <tr> 
 <td style="background-color:#c1e6c6;"> 鼠标事件 </td> 
 <td style="background-color:#c1e6c6;width:321px;"> 当用户通过鼠标在页面执行操作时触发 </td> 
 <td style="background-color:#c1e6c6;width:269px;"> dbclick、mouseup </td> 
 </tr> 
 <tr> 
 <td style="background-color:#c1e6c6;"> 滚轮事件 </td> 
 <td style="background-color:#c1e6c6;width:321px;"> 当使用鼠标滚轮或类似设备时触发 </td> 
 <td style="background-color:#c1e6c6;width:269px;"> mousewheel </td> 
 </tr> 
 <tr> 
 <td style="background-color:#c1e6c6;"> 文本事件 </td> 
 <td style="background-color:#c1e6c6;width:321px;"> 当在文档中输入文本时触发 </td> 
 <td style="background-color:#c1e6c6;width:269px;"> textInput </td> 
 </tr> 
 <tr> 
 <td style="background-color:#c1e6c6;"> 键盘事件 </td> 
 <td style="background-color:#c1e6c6;width:321px;"> 当用户通过键盘在页面上执行操作时触发 </td> 
 <td style="background-color:#c1e6c6;width:269px;"> keydown、keypress </td> 
 </tr> 
 <tr> 
 <td style="background-color:#c1e6c6;"> 合成事件 </td> 
 <td style="background-color:#c1e6c6;width:321px;"> 当为IME（输入法编辑器）输入字符时触发 </td> 
 <td style="background-color:#c1e6c6;width:269px;"> compositionstart </td> 
 </tr> 
 <tr> 
 <td style="background-color:#c1e6c6;"> 变动事件 </td> 
 <td style="background-color:#c1e6c6;width:321px;"> 当底层DOM结构发生变化时触发 </td> 
 <td style="background-color:#c1e6c6;width:269px;"> DOMsubtreeModified </td> 
 </tr> 
 </tbody> 
</table>

## DOM4 ##

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

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

[JS--DOM0_ DOM1_ DOM2_ DOM3_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122274229
[Document Object Model _DOM_ Level 1 Specification]: https://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/
[W3C DOM4]: https://www.w3.org/TR/2015/REC-dom-20151119/