DOM2级与3级

DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。

DOM2 级核心：在1 级核心基础上构建，为节点添加了更多方法和属性。
DOM2 级视图：为文档定义了基于样式信息的不同视图。
DOM2 级事件：说明了如何使用事件与DOM文档交互。
DOM2 级样式：定义了如何以编程方式来访问和改变CSS样式信息。
DOM2 级遍历和范围：引入了遍历DOM文档和选择其特定部分的新接口。
DOM2 级 HTML：在1 级HTML基础上构建，添加了更多属性、方法和新接口。

样式

访问元素的样式

任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性(属性)指定的所有样式信息，会直接修改和添加在HTML元素中，不能直接修改css外部样式表。

在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。对于有着短划线的属性需要使用驼峰大小写。
由于float和class是JavaScript中的保留字，因此不能用作属性名。“DOM2 级样式”规范规定样式对象上相应的属性名分别是cssFloat和className，float在IE中则是styleFloat。

<div id="myDiv" style="width:100px;height:100px">方块</div>

var myDiv = document.getElementById("myDiv");
//设置背景颜色
myDiv.style.backgroundColor = "#fff";
//在div中添加"background-color:#fff"
//<div id="myDiv" style="width:100px;height:100px;background-color:#fff">方块</div>

事件

JavaScript与HTML之间的交互是通过事件实现的，是将JavaScript与网页联系在一起的主要方式。

事件流

事件流描述的是从页面接收事件的顺序，因开发团队不同分为冒泡流和捕获流。

事件处理程序

HTML事件处理程序

<div id="myDiv" style="width:100px;height:100px" onclick="myDiv()">方块</div>

<script>
    function myDiv(){
        alert("Hello world!")
    }
</script>
//点击input触发dome函数

DOM0级事件处理程序

var myDiv = document.getElementById("myDiv");

myDiv.onclick = function(){
    alert("Hello world!")
};

DOM2级事件处理程序

dom定义了两个方法，addEventListener()和removeEventListener(),所有dom节点都包含这两个方法，并都接受三个参数：要处理的事件名,事件处理程序的函数和一个布尔值。最后一个布尔值是true则表示捕获阶段调用事件处理程序，反之是冒泡阶段。

var myDiv = document.getElementById("myDiv");

myDiv.addEventListener("click",function(){
    alert("Hello world!")
},true)

addEventListener() 方法用于向指定元素添加事件句柄。
removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。

跨浏览器的事件处理程序

跨浏览器需要封装以下代码：

var EventUtil = {

    addHandler:function (element,type,handler) {
         if(element.addEventListener){
             element.addEventListener(type, handler,false);
         } else if (element.attachEvent) {
             element.attachEvent("on" + type,handler);
         }else {
             element["on" + type] = handler;
         }
    },

    removeHandler:function (element,type,handler) {
         if (element.removeEventListener) {
             element.removeEventListener(type, handler,false);
         } else if (element.detachEvent) {
             element.detachEvent("on" + type,handler);
         }else {
             element["on" + type] = null;
         }
    }
};
var dome = function(){
    alert("Hello world!")
}

EventUtil.addHandler1(myDiv,"click",dome);
EventUtil.removeHandler(myDiv,"click",dome);

事件对象

在触发DOM上的某个事件的时候,会产生Event对象,这个对象包含着所有与事件有关的信息。

内存和性能

注意限制一个页面中的事件处理程序的数量，数量太多会导致占用大量内存，而且会让用户感觉页面反应不灵敏。
建立在事件冒泡机制之上的事件委托技术，可以有效减少事件处理程序的数量。