第12章
DOM2和DOM3的变化
操作样式的DOM API
DOM遍历与范围
DOM2级核心(DOM Level 2 core) :在1级核心基础上构建，为节点添加了更多方法和属性。
DOM2级视图（DOM Level 2 Views): 为文档定义了基于样式与信息的不同视图。
DOM2级事件(DOM Level 2 Events): 说明了如何使用事件与DOM文档交互。
DOM2级样式(DOM level 2 Style): 定义了如何以编程方式来访问和改变CSS样式信息。
DOM2级遍历和范围(DOM Level2 Tranversal and Range) : 引入了遍历DOM文档和选择其特定部分的新接口。
DOM2级HTML（DOM Level 2 HTML): 在1级HTML基础上构建，添加了更多属性、方法和新接口。

二、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","");</code></pre>
方法二：使用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";</code></pre>
方法三：使用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"