DOM1 主要定義的是 HTML 和 XML 文檔的底層結(jié)構(gòu)妆绞，DOM2 和 DOM3 級(jí)則在此基礎(chǔ)上引入更多交互功能隐圾，并支持更高級(jí)的 XML 特性龙致，并分為不同模塊子集：核心邓夕、視圖刘莹、事件、樣式焚刚、遍歷和范圍点弯、HTML。

1. DOM 變化

XML 命名空間

針對(duì) XML 命名空間矿咕， 不同 XML 文檔元素可以混合在一起抢肛，而不會(huì)發(fā)生命名沖突，不同命名空間下的元素?fù)碛懈髯缘淖釉靥贾约案髯栽氐乃刑匦源仆拧＝鉀Q了文檔中存在兩個(gè)或多個(gè)命名空間時(shí)，創(chuàng)建士聪、查詢(xún)?cè)兀ɑ蛱匦裕r(shí)不同命名空間歸屬問(wèn)題锦援。

其他變化

主要是為了加強(qiáng) API 的可靠性及完整性。

1. DocumentType（文檔類(lèi)型聲明） 新增了3個(gè)冷門(mén)屬性：publicId剥悟、systemId灵寺、internalSubset曼库。
2. 作為 DOM2級(jí)核心 -- Document 類(lèi)型變化
   • 方法 importNode()，與命名空間無(wú)關(guān)略板，可用來(lái)從一個(gè)文檔中取得一個(gè)節(jié)點(diǎn)毁枯，然后將其導(dǎo)入到另一個(gè)文檔中，可以跨文檔叮称。用法類(lèi)似于 cloneNode()种玛。
   • 屬性 defaultView(老版IE是 parentWindow()) ，該屬性保存的指針瓤檐，指向擁有給定文檔的窗口 window赂韵。
   • document.implementation.createDocumentType() 和
     document.implementation.createDocument()，使用后者創(chuàng)建新文檔時(shí)挠蛉，可以在參數(shù)中傳入使用前者所創(chuàng)建的文檔類(lèi)型祭示，因?yàn)榧扔形臋n的文檔類(lèi)型不能改變，因此 createDocumentType 也只有在創(chuàng)建新文檔時(shí)才有用谴古，但所創(chuàng)建的新文檔只有文檔元素质涛，沒(méi)有其余元素。
   • document.implementation.createHTMLDocument() 可以創(chuàng)建完整的 HTML 文檔實(shí)例掰担，唯一參數(shù)為文檔標(biāo)題汇陆。
3. Node 類(lèi)型主要有用的變化：
   isSameNode() 和 isEqualNode()，前者判斷是否相同（兩個(gè)節(jié)點(diǎn)引用的是同一個(gè)對(duì)象）带饱，后者判斷是否相等（各方面類(lèi)型瞬测、子節(jié)點(diǎn)、屬性均相等）纠炮。
4. 框架的變化：
   框架HTMLFrameElement 和 內(nèi)嵌框架HTMLIFrameElement 有了新屬性 contentDocument，是一個(gè)指向表示框架內(nèi)容的文檔對(duì)象指針灯蝴。

2. 樣式

訪問(wèn)元素樣式

1. 使用 style 特性定義的內(nèi)聯(lián)樣式：
   • myDiv.style.backgroundColor = 'red' 直接讀寫(xiě)(屬性名是駝峰)恢口；
   • 使用 style 對(duì)象上的API（屬性名非駝峰）：

     var prop = myDiv.style[2]; // 或 myDiv.style.item(2) 返回第3條css屬性規(guī)則 'background-color'
     var value = myDiv.style.getPropertyValue(prop); // 'red' 返回屬性值的字符串表示
     myDiv.style.setProperty('background-color', '#fff') // 設(shè)置style特性中的屬性
     myDiv.style.removeProperty('background-color') // 刪除屬性
     myDiv.style.cssText  = 'width: 25px; height: 100px'; // 對(duì) style 對(duì)象中的 cssText屬性賦值，可以同時(shí)應(yīng)用多項(xiàng)變化
     

2. 計(jì)算后的樣式：
   使用 document.defaultView.getComputedStyle() 方法獲得可能受到了其他樣式表層疊而來(lái)的最后的 style 對(duì)象穷躁， 和元素上的 style 屬性一樣繼承自 CSSStyleDeclaration對(duì)象：

    document.defaultView.getComputedStyle(myDiv, null) // 第二個(gè)參數(shù)是偽元素字符串耕肩，如： ':after'。
   

   計(jì)算樣式是只讀的问潭，修改計(jì)算后樣式對(duì)象中的CSS屬性會(huì)報(bào)錯(cuò)猿诸，怎么辦呢？可以繼續(xù)閱讀接下來(lái)介紹的操作樣式表中的 CSS 規(guī)則狡忙。

操作樣式表

CSSStyleSheet 類(lèi)型表示的是樣式表梳虽，包括 link 和 style 元素中定義的樣式表，兩種方式可以獲取樣式表對(duì)象：一種是document.styleSheets 獲取應(yīng)用于當(dāng)前文檔的所有樣式表集合灾茁，一種是在 link 或 style 元素上的 sheet（IE支持 styleSheet）屬性獲取當(dāng)前樣式表窜觉。
其繼承自 StyleSheet 類(lèi)型谷炸，后者作為基礎(chǔ)接口用來(lái)定義非 CSS 樣式表。
CSSStyleSheet 對(duì)象除了 disabled 屬性外禀挫，其他屬性都是只讀的旬陡，和 style 對(duì)象以及 DOM 絕大部分集合一樣同樣擁有 item() 和 length。

1. CSS 規(guī)則：
   CSSStyleRule 類(lèi)型繼承自 CSSRule 基類(lèi)對(duì)象语婴，表示樣式表中的一條 CSS 樣式規(guī)則信息（一對(duì)兒 { } 花括號(hào)中的全部?jī)?nèi)容）描孟，除了 CSS 樣式規(guī)則外，還有 @import砰左、@font-face匿醒、@page 和 @charset 等，只是那些通常沒(méi)必要通過(guò)腳本訪問(wèn)菜职。
   CSSStyleRule CSS樣式規(guī)則對(duì)象的獲取方式：

   var sheet  = document.styleSheets[0]; //  第一個(gè)樣式表
   var rules = sheet.cssRules || sheet.rules; // 后者為了兼容IE青抛，取得規(guī)則列表
   var rule = rules[0]; // 取得第一條規(guī)則，也就是第一對(duì)兒 { } 花括號(hào)定義的規(guī)則
   

   CSSStyleRule 對(duì)象中主要屬性為：

   屬性	描述
   cssText	返回整條規(guī)則對(duì)應(yīng)文本酬核，和 style.cssText 不同的是前者還包含了選擇符文本和花括號(hào)蜜另，并且只讀
   selectorText	返回當(dāng)前規(guī)則的選擇符文本
   style	一個(gè) CSSStyleDeclaration 對(duì)象

   關(guān)于 style 屬性，和直接在元素上通過(guò)屬性 style 獲取的一樣嫡意，可以通過(guò)它讀取和修改規(guī)則中的樣式信息：

   // ...
   console.log(rule.style.backgroundColor); // 'red'
   rule.style.backgroundColor = 'yellow'; // 修改當(dāng)前規(guī)則的背景色
   

   但需要注意举瑰，這種通過(guò)某個(gè) CSS 樣式規(guī)則的 style 屬性修改樣式信息，會(huì)影響到頁(yè)面中所有適用于該規(guī)則的所有元素蔬螟。

2. 添加和刪除規(guī)則：

   • 向樣式表中添加規(guī)則此迅，使用 insertRule() (<=IE8 可使用 addRule())；
   • 向樣式表中刪除規(guī)則旧巾，使用 deleteRule() (<=IE8 可使用 removeRule())耸序；
     但是對(duì)已有樣式表進(jìn)行添加和刪除規(guī)則在實(shí)際開(kāi)發(fā)中很少見(jiàn)，而且影響 CSS 層疊效果鲁猩，慎用坎怪！

元素大小

1. 偏移量：

   屬性	描述
   offsetHeight	元素在垂直方向上占用的像素大小，包括水平滾動(dòng)條高度和邊框
   offsetWidth	元素在水平方向上占用的像素大小廓握，包括垂直滾動(dòng)條高度和邊框
   offsetLeft	元素的左外邊框至包含元素的左內(nèi)邊框之間的像素距離
   offsetTop	元素的上外邊框至包含元素的上內(nèi)邊框之間的像素距離

offsetLeft 和 offsetTop 屬性與包含元素offsetParent 有關(guān)搅窿，offsetParent 的值不一定就是父元素 parentNode。
當(dāng) offsetParent 為 body 時(shí)情況比較特殊：

在IE8/9/10及Chrome中隙券，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(當(dāng)前元素的margin-left)男应。
在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(當(dāng)前元素的margin-left)娱仔。

2. 客戶區(qū)大秀迤：
   clientWidth 和 cilentHeight 屬性可以獲取元素內(nèi)容及其內(nèi)邊距所占據(jù)的空間大小，即 content + padding（不包括滾動(dòng)條）牲迫。
   

   
   document.documentElement.clientWitdth 可以獲取瀏覽器視口（html元素）大小薪铜。

3. 滾動(dòng)大兄诠：

   屬性	描述
   scrollHeight	沒(méi)有滾動(dòng)條時(shí)元素內(nèi)容總高度
   scrollWidth	沒(méi)有滾動(dòng)條時(shí)元素內(nèi)容總寬度
   scrollLeft	被滾動(dòng)后左側(cè)隱藏的像素?cái)?shù)，可寫(xiě)
   scrollTop	被滾動(dòng)后上方隱藏的像素?cái)?shù)隔箍，可寫(xiě)

確定文檔總寬高時(shí)谓娃，需要取得 scrollWidth 或 clientWidth 和 scrollHeight 或 scrollHeight 的最大值，才能獲得跨瀏覽器的精確結(jié)果蜒滩，比如：

var html = document.documentElement;
var docHeight = Math.max(html.scrollHeight, html.clientHeight);

4. 確定元素大斜醮铩：

使用 element.getBoundingClientRect() 方法返回元素的大小及其相對(duì)于視口的位置。返回的 DOMRect 對(duì)象是一組用于描述邊框?qū)傩缘募稀?br>

{
    bottom: 278
    height: 240  // 值等于元素的 offsetHeight俯艰，即 content + padding + border
    left: 62
    right: 402
    top: 38
    width: 340  //  值等于元素的 offsetWidth
    x: 62
    y: 38
}

除了 width 和 height 外的屬性都是相對(duì)于視口（即當(dāng)前屏幕文檔窗口）的左上角位置而言的捡遍，而不是絕對(duì)的，因此 top 和 left 值會(huì)隨著滾動(dòng)發(fā)生變化竹握。
如果需要獲得相對(duì)于整個(gè)網(wǎng)頁(yè)左上角定位的屬性值画株，那么只要給top、left屬性值加上當(dāng)前的滾動(dòng)位置（通過(guò)window.scrollX和window.scrollY）啦辐，這樣就可以獲取與當(dāng)前的滾動(dòng)位置無(wú)關(guān)的值谓传，為了跨瀏覽器兼容，使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY芹关。

多合一示意圖