DOM的发展历史

Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
Javascriptd的早期版本向程序员提供了查询和操控Web文档某些实际内容（主要是图像和表单）的手段。因为Javascript预先定义了“images”和“forms”等术语，我们才能像下面这样在JavaScript脚本里引用“文档中的第三个图像”或“文档中名为‘details’的表单”：

  document.imgages[2]
  document.forms['details']

现在的人们通常把这种试验性质的初级DOM称为“第0级DOM”（DOM Level 0）。在还未形成统一标准的初级阶段，“第0级DOM”的常见用途是翻转图片和验证表单数据。
Netscape和微软公司各自推出第四代浏览器产品以后，(Netscape Navigator 4发布于1997年6月，IE 4发布于1997年10月) ，DOM开始遇到麻烦，陷入困境。NN4和IE4浏览器使用的是两种不兼容的DOM。换句话说，虽然浏览器制造商的目标一样，但他们解决DOM问题时采用的办法却完全不同。
就在浏览器制造商以DOM为武器展开营销大战的同时，W3C不事声张的结合大家的优点推出了一个标准化的DOM。令人欣慰的是，Netscape、微软和其他一些浏览器制造商们还能抛开彼此的敌意而与W3C携手制定新的标准，并与1998年10月完成了“第一级DOM”（DOM Level1）

什么是DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

DOM的作用

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

XML DOM 是：
用于 XML 的标准对象模型
用于 XML 的标准编程接口
中立于平台和语言
W3C 标准
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）
换句话说：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

HTML DOM 是：
HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准
HTML DOM 定义了所有 HTML 元素的**对象和属性**，以及访问它们的方法（接口）。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM 节点

根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：

整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点

DOM0级和DOM2级的区别

0级DOM

主要分为2个：

一是在标签内写onclick事件

<input type="button" value="Click Here" onclick="alert('Clicked!');"/>
//直接写
<input type="button" value="Click Here" onclick="showMessage();" />
//调用 script 要写在前面

二是在js写onlicke=function(){}函数

document.getElementById("myButton").onclick = function () {
    alert('thanks');
}

1级DOM

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型，这个标准下的事件模型就是我们所说的2级DOM事件模型

2级DOM

DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：

addEventListener
removeEventListener

所有的DOM节点都包含这两个方法，并且它们都接受三个参数：

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

addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
removeEventListener():不能移除匿名添加的函数。

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('btnClick');

    var handler=function() {
        alert(this.id);
    }

    btnClick.addEventListener('click', handler, false);
    btnClick.removeEventListener('click', handler, false);
</script>

事件流

目前主要有三种模型

IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

事件流

HTML常见事件

load：当页面完全加载后在window上触发，当图像加载完成后在img元素上触发，或当嵌入内容加载完成时，在object元素上触发
unload：页面完全卸载后在window上触发，或嵌入内容卸载后在object元素触发
select：用户选择文本框中的字符时触发
change：文本框焦点变化后其值改变时触发
submit：用户提交表单的时候触发
resize：窗口或框架大小变化的时候在window上触发
scroll：用户滚动带滚动条的元素时，在该元素上触发
focus：页面或元素获得焦点时在window及相应元素上触发
blur：页面或元素失去焦点时在window及相应元素上触发
beforeunload：页面卸载前在window上触发
mousewheel：不算HTML的，当用户通过鼠标滚轮与页面交互，在垂直方向滚动页面时触发