12.1 DOM變化

node類型變化，DOM3引入兩個(gè)輔助比較節(jié)點(diǎn)的方法，isSameNode()和isEqualNode()，分別判斷調(diào)用節(jié)點(diǎn)和參數(shù)節(jié)點(diǎn)是否相同或相等。相同表示兩個(gè)節(jié)點(diǎn)引用的是同一個(gè)節(jié)點(diǎn)，相等表示兩個(gè)節(jié)點(diǎn)是相同的類型，具有相同的屬性(nodeName，nodeValue)，而且他們的attributes和childNodes屬性也相等。

<ul class="a">
    <li class="b">abc</li>
    <li class="b">abc</li>
</ul>

var li = document.querySelectorAll(".b");
console.log(li[0].isSameNode(li[1]));  // false
console.log(li[0].isEqualNode(li[1]));  // true

框架的變化，框架和內(nèi)嵌框架DOM2級(jí)新增屬性contentDocument，這個(gè)屬性包含一個(gè)指針，指向表示框架內(nèi)容的文檔對(duì)象。IE8之前不支持本屬性，但支持一個(gè)contentWindow屬性，該屬性返回框架的window對(duì)象，window對(duì)象又包含document屬性。兼容性獲取框架的文檔對(duì)象：

var iframe = document.getElementBy("iframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

12.2 樣式

12.2.1 訪問(wèn)元素的樣式

任何支持style特性的HTML元素都有一個(gè)對(duì)應(yīng)的style屬性，包含通過(guò)HTML的style特性指定的所有樣式信息，但不包含外部樣式表或嵌入樣式表經(jīng)層疊而來(lái)的樣式。有短劃線的CSS屬性名（例如background-color）必須轉(zhuǎn)為駝峰大小寫形式。float是JavaScript中的關(guān)鍵字，要轉(zhuǎn)為cssFloat，IE使用的是styleFloat。style對(duì)象具有以下屬性方法：
cssText屬性，能夠訪問(wèn)到style特性中的CSS代碼。
getPropertyValue()，傳入一個(gè)參數(shù)，返回包含給定屬性名的字符串值。
getPropertyPriority()，傳入一個(gè)參數(shù)，返回包含給定屬性是否使用了!important設(shè)置。設(shè)置了則返回"important"字符串，否則返回空字符串。
removeProperty()，傳入一個(gè)參數(shù)，從樣式中刪除給定的屬性。
setProperty()，傳入3個(gè)參數(shù)，要設(shè)置的屬性名，要設(shè)置的屬性值，表示是否使用!important設(shè)置的“important”字符串或空字符串。
document.defaultView.getComputedStyle()方法用于確定元素所有的計(jì)算樣式，接收兩個(gè)參數(shù)，第一個(gè)為需要取得計(jì)算樣式的元素，第二個(gè)為偽元素字符串，不需要偽元素則為null。IE不支持本方法，但提供元素的currentStyle屬性，包含當(dāng)前元素的所有計(jì)算樣式。所有計(jì)算樣式都是只讀的，不能修改計(jì)算后的樣式對(duì)象中的CSS。

12.2.2 元素大小

元素的可見(jiàn)大小由其高度，寬度決定，包括內(nèi)邊距，滾動(dòng)條和邊框大小，不包括外邊距。
offsetParent屬性，表示元素的包含元素，不一定與parentNode相等。
offsetHeight屬性，元素在垂直方向上占用空間大小，包括元素高度，水平滾動(dòng)條的高度，上邊框高度和下邊看高度。
offsetWidth屬性，元素在水平方向上占用空間大小，包括元素寬度，垂直滾動(dòng)條的寬度，左邊框?qū)挾群陀疫吙磳挾取?br> offsetLeft屬性，元素左外邊框到包含元素的左內(nèi)邊框之間的距離。
offsetTop屬性，元素上外邊框到包含元素的上內(nèi)邊框之間的距離。
判斷元素在頁(yè)面上的偏移量：

function getElementLeftTop(ele) {
    var eleLeft = ele.offsetLeft;
    var eleTop = ele.offsetTop;
    var cur = ele.offsetParent;
    while (cur !== null){
        eleLeft += cur.offsetLeft;
        eleTop += cur.offsetTop;
        cur = cur.offsetParent;
    }
    return {left:eleLeft, top:eleTop};
}

客戶區(qū)域大小，指的是元素內(nèi)容及其內(nèi)邊距所占據(jù)的空間大小。
clientWidth屬性，元素內(nèi)容區(qū)寬度加上左右內(nèi)邊距寬度。
clientHeight屬性，元素內(nèi)容區(qū)高度加上上下內(nèi)邊距寬度。
確定瀏覽器的視口大?。?/p>

function getElementWidthHeight() {
    if(document.compatMode == "BackCompat"){
        return {
            width:document.body.clientWidth,
            top:document.body.clientHeight
        };
    }else{
        return {
            width:document.documentElement.clientWidth,
            top:document.documentElement.clientHeight
        };
    }
}

滾動(dòng)大小，指的是包含滾動(dòng)內(nèi)容的元素的大小。
scrollHeight屬性，在沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容總高度。
scrollWidth屬性，在沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容總寬度。
scrollLeft屬性，被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)，通過(guò)設(shè)置這個(gè)屬性可以改變?cè)氐臐L動(dòng)位置。
scrollTop屬性，被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)，通過(guò)設(shè)置這個(gè)屬性可以改變?cè)氐臐L動(dòng)位置。
確定文檔總高度：

function getDocWidthHeight() {
    var docWidth,docHeight;
    if(document.compatMode == "BackCompat"){
        docWidth = Math.max(document.body.scrollWidth,document.body.clientWidth);
        docHeight = Math.max(document.body.scrollHeight,document.body.clientHeight);
    }else{
        docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
        docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
    }
    return {
        width:docWidth,
        height:docHeight
    };
}

確定元素大小，每個(gè)元素都有一個(gè)getBoundingClientRect()方法，該方法返回一個(gè)矩形對(duì)象，包含left、top、right、bottom屬性。這些元素給出了元素相對(duì)于視口的位置。