面试题：DOM0，DOM2，DOM3的区别

面试题：DOM0，DOM2，DOM3的区别

在js基础篇里的面试题看到这个问题，一脸懵逼，怎么看网课的时候没听说有什么DOM后面加数字的（不同阶段的），想着可能是学到，以后就知道了。后来在红宝书里面看见了，也去查阅了一些资料，总结如下。

DOM级别

1998年10月，DOMLevel 1（简写为DOM1）成为W3C的推荐标准。这个规范有两个模块组成：DOM Core 和 DOM HTML。前者提供了一种映射XML文档，从而方便访问和操作文档任意部分的方式；后者扩展了前者，并添加了特定于HTML的对象和方法。而数字的更新意味着DOM的升级和更新。

DOM0

其实并没有一种标准叫“DOMLevel 0”，这只是DOM历史中的一个参照点。DOM0可以看做是IE4和Netscape Navigator 4中最初支持的DHTML。

内容

DOM0级事件具有极好的跨浏览器优势，会以最快的速度绑定。
为某一个元素的同一个行为绑定不同的方法在行内会分别执行。
为某一个元素的同一个行为绑定不同的方法在script标签中后面的方法会覆盖前面的方法。

<div id="box" onclick="fun1();fun2()">点我</div>//行内分别执行
<script>
	// 某一个元素的同一个行为绑定不同的方法在行内会分别执行
	function fun1() {
		console.log('方法1');
	}
	function fun2() {
		console.log('方法2');
	}
	// 执行 方法1		// 执行方法2
</script>

<div id="box">点我</div>
<script>
	// 某一个元素的同一个行为绑定不同的方法在script标签中后面的方法会覆盖前面的方法
	var box = document.getElementById('box');
	box.onclick = fun1;
	box.onclick = fun2;
	function fun1() {
		console.log('方法1');
	}
	function fun2() {
		console.log('方法2');
	}
	// 执行方法2；方法2覆盖方法1，所有方法1不执行
</script>

删除DOM 0事件处理程序，只要将对应事件属性设为null即可。

DOM1

DOM1一般只有设计规范没有具体实现，所以一般跳过。

DOM2

对最初DOM的扩展增加了对鼠标和用户界面事件、范围、遍历（迭代DOM节点的方法）的支持，而且通过对象接口支持了层叠样式表（css）。另外DOM 1中的DOM Core 也被扩展以包含对XML命名空间的支持。

内容

DOM2新增以下模块，以支持新的接口。

• DOM视图：描述追踪文档不同视图的接口
• DOM事件：描述事件及事件处理的接口
• DOM样式：描述处理元素css样式的接口
• DOM遍历和范围：描述遍历和操作DOM树的接口

DOM2级事件是通过addEventListener绑定的事件，IE下的DOM2事件通过attachEvent绑定；可以给某一个元素的同一个行为绑定不同的方法在行内会分别执行。

<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
</script>

删除DOM 2事件处理程序，通过removeEventListener

box.removeEventListener('click', fun2,false);

DOM3

DOM3进一步拓展了DOM，增加了以统一的方式加载和保存文档的方法（包含在一个叫DOM Load Save 的新模块中），还有验证文档的方法（DOM Validation）。

内容

DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

事件类型	说明	举例
UI事件	当用户与页面上的元素交互时触发	load，scroll
焦点事件	当元素获得或失去焦点时触发	focus，blur
滚轮事件	当使用鼠标滚轮或类似设备时触发	mousewheel
鼠标事件	当用户通过鼠标在页面执行操作时发生	dbclick，mouseup
文本事件	挡在文档中输入文本时触发	textinput
变动事件	当底层DOM结构发生改变时触发	DOMsubtreeModified
合成事件	当为IME输入字符时触发	compositionstart
键盘事件	当用户通过键盘在页面上执行操作时触发

同时DOM3级事件也允许开发人员自定义一些事件。

目前，W3C不在按照Level来维护DOM了，而是作为DOM Living Standard 来维护，其快照成为DOM4.