2016-1-20（dom2和dom3详解）

一、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代码。例如：

另例：

function showMessage(){
alert("Hello World!");
}

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）鼠标滚动事件

。。。。。。