一、DOM2和DOM3概述
文档对象模型是一种与编程语言及平台无关的API(Application programming Interface)，借助于它，程序能够动态地访问和修改文档内容、结构或显示样式。W3C协会早在1988年就开始了DOM标准的制定，W3C DOM标准可以分为DOM1,DOM2,DOM3三个版本。
DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级别则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。为此DOM2和DOM3级分为许多模块（模块之间具有某种关联），分别描述了DOM的某个非常具体的子集。
这些模块如下：
1、DOM2级核心（DOM Level 2 Core）：在1级核心的基础上构建，为节点添加了更多方法和属性；
2、DOM2级视图（DOM Level 2 Views）：为文档定义了基于样式信息的不同视图；
3、DOM2级事件（DOM Level 2 Style）：定义了如何以编程方式来访问和改变CSS样式信息；
4、DOM2级遍历和范围（DOM Level 2 Traversal and Range）：引入了遍历DOM文档和选择其特定部分的新接口。
5、DOM2级HTML（DOM Level 2 HTML）：在1级HTML基础上构建，添加了更多属性、方法和新接口。
6、DOM3级又增加了XPath模块和加载与保存（Load and Save）模块。
DOM2级和3级的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。
二、DOM的变化
DOM的变化一方面是对命名空间的支持，另一方面是对方便操作其他web元素的支持。
我们可以通过下列代码来确定浏览器是否支持这些DOM模块：
var supportsDOM2Core = document.implementation.hasFeature(“Core”,”2.0”);
var supportsDOM3Core = document.implementation.hasFeature(“Core”,”3.0”);
var supportsDOM2HTML = document.implementation.hasFeature(“HTML”,”2.0”);
var supportsDOM2Views = document.implementation.hasFeature(“Views”,”2.0”);
var supportsDOM2XML = document.implementation.hasFeature(“XML”,”2.0”);
三、DOM的style属性（样式）
1、任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。（例如：background-image对应style.backgroundImage）
注：CSS属性中的float属性，是JavaScript中的保留字，因此不能用作属性名，DOM2中使用的是cssFloat属性名。
2、操作方法，设置样式
方法一：使用style属性的setProperty方法。
var myDiv = document.getElementByIdx_x(“myDiv”);
//set the background color
myDiv.style.setProperty("background-color", "red", "");;
//change the dimensions
myDiv.style.setProperty("width", "100px", "");
myDiv.style.setProperty("height", "200px", "");
//assign a border
myDiv.style.setProperty("border", "1px solid black", "");
方法二：使用style中“CSS属性对应的style属性”。
var myDiv = document.getElementByIdx_x(“myDiv”);
//set the background color
myDiv.style.backgroundColor = "red";
//change the dimensions
myDiv.style.width = "100px";
myDiv.style.height = "200px";
//assign a border
myDiv.style.border = "1px solid black";
方法三：使用style中cssText属性。
var myDiv = document.getElementByIdx_x(“myDiv”);
myDiv.style.cssText =”width: 25px; height: 100px; background-color: green”;
注：这种赋值方式会重写整个style特性的值。
3、获取样式直接通过类似这样的代码来获取：
var myDiv = document.getElementByIdx_x(“myDiv”);
alert(myDiv.style.backgroundColor);
4、样式层叠问题
当我们设置多个样式时，究竟是哪个样式起作用，我们需要用代码来认识一下。
DOM2用的是defaultView属性中的getComputedStyle()方法。
var myDiv = document.getElementByIdx_x(“myDiv”);
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); //”red”
alert(computedStyle.width); //”100px”
alert(computedStyle.height); //”200px”
alert(computedStyle.border); //”1px solid black”
alert(computedStyle.borderLeftWidth); //”1px”
alert(computedStyle.visibility);
该方法返回的是一个CSSStyleDeclaration对象（与style属性的类型相同）。
在IE中，每个具有style属性的元素都有一个currentStyle属性，这个属性是CSSStyleDeclaration的实例。
var myDiv = document.getElementByIdx_x(“myDiv”);
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //”red”
alert(computedStyle.width); //”100px”
alert(computedStyle.height); //”200px”
alert(computedStyle.border); //”1px solid black”
alert(computedStyle.borderLeftWidth); //”1px”
四、DOM事件
（一）事件概述
浏览器的事件系统，比较复杂。四个主要浏览器已经实现了“DOM2级事件”，但这个规范并没有涵盖所有事件类型。浏览器对象模型（BOM）也支持一些事件，这些事件与文档对象模型（DOM）事件之间的关系并不十分清晰，因为BOM事件没有任何规范可以遵循。
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段，处于目标段和事件冒泡阶段。
事件就是用户或浏览器自身执行的某种动作。诸如：click、load和mouseover，都是事件的名字。
响应事件的函数就叫做事件处理程序。
事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick，load事件的事件处理程序就是onload。为事件指定处理程序的方式有好几种。
（二）事件处理程序
1、HTML事件处理程序
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。例如：
另例：
HTML中指定事件处理程序有两个缺点。一个是时差问题。二个是HTML与JavaScript代码紧密耦合（如果要更换事件处理程序，就要改动两个地方：HTML代码和JavaScript代码）。
2、DOM0级事件处理程序
要使用JavaScript指定事件处理程序，首先必须取得一个要操作的对象的引用。
每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序：
var btn = document.getElementByIdx_x(“myBtn”);
btn.onclick = function(){
alert(“Clicked”);
}
使用DOM0级方法指定的事件处理程序被认为是元素的方法。换句话说，程序中的this引用当前元素。例如：
var btn = document.getElementByIdx_x(“myBtn”);
btn.onclick = function(){
alert(“this.id”);
}
删除DOM0级事件处理程序，只需这样：
btn.onclick = null; //删除事件处理程序
将事件处理程序设置为null后，单击按钮将不会有任何动作发生。
如果你使用HTML指定事件处理程序，那么onclick属性的值就是一个包含着在同名HTML特性中的指定的代码的函数。而将相应的属性设置为null，也可以删除以这种方式指定的事件处理函数。
3、DOM2级事件处理程序（IE不支持）
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。
var btn = document.getElementByIdx_x(“myBtn”);
btn.addEventListener(“click”,function(){alert(“this.id”);},false);
使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。例如：
var btn = document.getElementByIdx_x(“myBtn”);
btn.addEventListener(“click”,function(){alert(“this.id”);},false);
btn.addEventListener(“click”,function(){alert(“hello world”);},false);
删除事件应用程序。例如：
var btn = document.getElementByIdx_x(“myBtn”);
var handler = function(){
alert(this.id);
}
btn.addEventListener(“click”,handler,false);
//省略了其他代码
btn.removeEventListener(“click”,handler,false);//有效！
注：匿名函数无法删除。
4、IE事件处理程序
IE实现了与DOM中类似的方法：attachEvent()和detachEvent()。例如：
var btn = document.getElementByIdx_x(“myBtn”);
btn.attachEvent(“onclick”,function(){alert(“this.id”);});
注意：attachEvent(）的第一个参数是onclick，而非click。同时，这里的this不在是作用域内的元素，而是window对象。
同理，删除事件处理函数用detachEvent()函数。
（三）事件对象event
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括事件的元素、事件的类型，以及其他与特定事件相关的信息。例如，鼠标操作事件，包含鼠标的位置信息，键盘操作事件包含按下的键的信息。所有浏览器都支持event对象，但支持方式不同。
1、DOM中的事件对象
type属性用于查看事件类型。例如：
var btn = document.getElementByIdx_x(“myBtn”);
btn.onclick = function(event){
alert(“event.type”);
}
在需要通过一个函数处理多个事件时，可以使用type属性。例如
var btn = document.getElementByIdx_x(“myBtn”);
var handler = function(event){
switch(event.type){
case “click”:
alert(“Clicked”);
break;
case “mouseover”:
event.target.style.backgroundColor = “red”;
break;
case “mouseout”:
event.target.style.backgroundColor=”“;
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onnouseout = handler;
要阻止特定事件的默认行为，可以使用preventDefault()方法。例如：
var link = document.getElementByIdx_x(“myLink”);
link.onclick = function(event){
event.preventDefault();
};
stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。
2、IE事件对象(DOM0级事件处理程序)
在IE中，event对象是window对象的一个属性。例如：
var btn = document.getElementByIdx_x(“myBtn”);
btn.onclick = function(){
event = window.event;
alert(“event.type”);
};
（四）事件类型
1、DOM2级事件类型
（1）UI（user interface，用户界面）事件，在用户与页面上的元素交互时触发。
（2）鼠标事件，当用户通过鼠标在页面上执行操作是触发。
（3）键盘事件，当用户通过键盘在页面上执行操作是触发。
（4）HTML事件，当浏览器窗口发生变化或发生特定的客户端/服务器交互时触发。
（5）变动（mutation）事件，当底层DOM结构发生变化时触发。
2、UI事件
（1）DOMActive：表示元素已经被用户操作（通过鼠标或键盘）激活。
（2）DOMFocusIn:表示元素已经获得了焦点；
（3）DOMFocousOut：表示元素已经失去了焦点。
支持这几个UI事件的浏览器很少，因此我们不推荐使用。
3、鼠标事件
（1）鼠标事件触发顺序：
mousedown-》mouseup-》click-》mousedown-》mouseup-》click-》dbclick。
（2）客户区坐标位置
var div = docment.getElementById(“myDiv”);
EventUtil.addHandler(div,”click”,function(event){
event = EventUtil.getEvent(event);
alert(“Client coordinates:”+event.clientX+”,”+event.clientY);
});
（3）屏幕坐标位置
var div = document.getElementByIdx_x(“myDiv”);
EventUtil.addHandler(div, “click”, function(event){
event = EventUtil.getEvent(event);
alert(“Screen coordinates: ” + event.screenX + “,” + event.screenY);
});
4、键盘事件（DOM0级事件支持）
（1）键盘事件包括三个：keydown 、 keypress 、 keyup。
（2）键码，event对象的keyCode属性中会包含一个代码，与键盘上一个特定的键对应。
对应的键码请查表。
5、HTML事件（略）
load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur。
多数HTML事件都与window对象或表单控件相关。
6、变动事件（略）
7、专有事件（后面再重点了解了解，现在大概了解一下）
（1）上下文事件
（2）卸载前事件
（3）鼠标滚动事件
。。。。。。