[TOC] ## 9.4 DOM2和DOM3 DOM1級主要定義的是HTML和XML文檔的底層結構。DOM2和DOM3級則在這個結構的基礎上引入了更多的交互能力，也支持了更高級的XML特性。 DOM2 和DOM3級分為許多模塊（模塊之間具有某種關聯），分別描述了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 Level 2 Traversal and Range）：引入了遍歷DOM 文檔和選擇其特定部分的新接口。 * DOM2 級 HTML（DOM Level 2 HTML）：在1 級HTML 基礎上構建，添加了更多屬性、方法和新接口 ### 9.4.1 樣式 在 HTML 中定義樣式的方式有3 種：通過<link/>元素包含外部樣式表文件、使用<style/>元素定義嵌入式樣式，以及使用style 特性定義針對特定元素的樣式。 “DOM2 級樣式”模塊圍繞這3 種應用 樣式的機制提供了一套API。要確定瀏覽器是否支持DOM2 級定義的CSS 能力，可以使用下列代碼 ~~~ var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0"); var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0"); ~~~ **1. 訪問元素的樣式** 任何支持 style 特性的HTML 元素在JavaScript 中都有一個對應的style 屬性。這個style對象是CSSStyleDeclaration的實例，包含著通過HTML的style特性指定的所有樣式信息，但不包含與外部樣式表或嵌入樣式表經層疊而來的樣式。 訪問和設置元素的css屬性可以這樣操作: ~~~ var div = document.getElementById('myDiv'); console.log(div.style.color); //獲取color值 div.style.color = 'red'; //設置color值 div.style.fontSize = '20px';//設置font-size的值(這里會將有短橫線的值轉化為駝峰命名來獲取或設置) ~~~ 特例：由于float是保留關鍵字,所以通過cssFloat來訪問和設置,而IE中則通過styleFloat來設置或訪問. 元素的style對象除了有css的樣式屬性外,也包含了自己的一些屬性和方法,具體如下: ||| |---|---| |cssText|通過它能夠訪問和設置style 特性中的CSS代碼。| |length|應用給元素的CSS 屬性的數量。| |parentRule|表示CSS 信息的CSSRule 對象,后面將討論CSSRule 類型。| |getPropertyPriority(propertyName)|如果給定的屬性使用了!important 設置，則返回"important"；否則，返回空字符串。| |getPropertyValue(propertyName) | 返回給定屬性的字符串值。支持IE9+、Safari,Chrome,firfox | |item(index)|返回給定位置的CSS 屬性的名稱。 | |removeProperty(propertyName)|從樣式中刪除給定屬性。 | |setProperty(propertyName,value,priority)|將給定屬性設置為相應的值，并加上優先權標志（"important"或者一個空字符串）。 | ~~~ //設置style對象的cssText屬性 myDiv.style.cssText = "width: 25px; height: 100px; background-color: green"; alert(myDiv.style.cssText); ~~~ DOM2樣式增強了document.defaultView，提供了`getComputedStyle()方法`。接受兩個參數：要去的計算樣式的元素和一個偽元素字符串（如“：after”）。返回一個CSSSstyleDeclaration對象，其中包含當前元素的所有計算的樣式。 **2. 操作樣式表** CSSStyleSheet 類型表示的是樣式表，包括通過<link>元素包含的樣式表和在<style>元素中定義的樣式表,使用下面的代碼可以確定瀏覽器是否支持DOM2 級樣式表: ~~~ var supportsDOM2StyleSheets =document.implementation.hasFeature("StyleSheets", "2.0"); ~~~ CSSStyleSheet 繼承自StyleSheet，后者可以作為一個基礎接口來定義非CSS 樣式表。從StyleSheet 接口繼承而來的屬性如下: ||| |---|---| | disabled | 表示樣式表是否被禁用的布爾值。這個屬性是可讀/寫的，將這個值設置為true可以禁用樣式表。| | href | 如果樣式表是通過<link>包含的，則是樣式表的URL；否則，是null。| | media | 當前樣式表支持的所有媒體類型的集合。與所有DOM 集合一樣，這個集合也有一個length 屬性和一個item()方法。也可以使用方括號語法取得集合中特定的項。如果集合是空列表，表示樣式表適用于所有媒體。在IE 中，media 是一個反映<link>和<style>元素media特性值的字符串。| | ownerNode | 指向擁有當前樣式表的節點的指針，樣式表可能是在HTML 中通過<link>或<style/>引入的（在XML 中可能是通過處理指令引入的）。如果當前樣式表是其他樣式表通過@import 導入的，則這個屬性值為null。IE 不支持這個屬性。| | parentStyleSheet | 在當前樣式表是通過@import 導入的情況下，這個屬性是一個指向導入它的樣式表的指針。| | title | ownerNode 中title 屬性的值。| | type | 表示樣式表類型的字符串。對CSS 樣式表而言，這個字符串是"type/css"。| 除了 disabled 屬性之外，其他屬性都是只讀的。在支持以上所有這些屬性的基礎上，CSSStyleSheet 類型還支持下列屬性和方法： ||| |---|---| | cssRules | 樣式表中包含的樣式規則的集合。IE 不支持這個屬性，但有一個類似的rules 屬性。| | ownerRule | 如果樣式表是通過@import 導入的，這個屬性就是一個指針，指向表示導入的規則；否則，值為null。IE 不支持這個屬性。| | deleteRule(index) | 刪除cssRules 集合中指定位置的規則。IE 不支持這個方法，但支持一個類似的removeRule()方法。| | insertRule(rule,index) | 向cssRules 集合中指定的位置插入rule 字符串。IE 不支持這個方法，但支持一個類似的addRule()方法。| 應用于文檔的所有樣式表是通過 document.styleSheets 集合來表示的。也可以直接通過<link>或<style>元素取得CSSStyleSheet 對象。DOM 規定了一個包含CSSStyleSheet 對象的屬性，名叫sheet；除了IE，其他瀏覽器都支持這個屬性。IE 支持的是styleSheet屬性。 **3. 元素大小** （1）偏移量 指包括元素在屏幕上占用的所有可見的空間。 元素的可見大小由高度、寬度決定，包括所有內邊距、滾動條和邊框大小（不包括外邊距） ||| |---|---| | offsetHeight| 元素在垂直方向上占用的空間大小，以像素計。包括元素的高度、（可見的）水平滾動條的高度、上邊框高度和下邊框高度。| | offsetWidth| 元素在水平方向上占用的空間大小，以像素計。包括元素的寬度、（可見的）垂直滾動條的寬度、左邊框寬度和右邊框寬度。| | offsetLeft| 元素的左外邊框至包含元素的左內邊框之間的像素距離。| | offsetTop| 元素的上外邊框至包含元素的上內邊框之間的像素距離。| （2）客戶區大小 指元素內容及其內邊距所占據的空間大小。 有關客戶區大小的屬性有兩個： ||| |---|---| | clientWidth| 元素內容區寬度加上左右內邊距寬度。| | clientHeight| 元素內容區高度加上上下內邊距高度。| （3）滾動大小 指包含滾動內容的元素的大小。 ||| |---|---| | scrollHeight| 在沒有滾動條的情況下，元素內容的總高度。| | scrollWidth| 在沒有滾動條的情況下，元素內容的總寬度。| | scrollLeft| 被隱藏在內容區域左側的像素數。通過設置這個屬性可以改變元素的滾動位置。| | scrollTop| 被隱藏在內容區域上方的像素數。通過設置這個屬性可以改變元素的滾動位置。| （4）確定元素大小 IE、Firefox 3+、Safari 4+、Opera 9.5 及Chrome 為每個元素都提供了一個getBoundingClientRect()方法。這個方法返回會一個矩形對象，包含4 個屬性：left、top、right 和bottom。這些屬性給出了元素在頁面中相對于視口的位置。但是，瀏覽器的實現稍有不同。IE8 及更早版本認為文檔的左上角坐標是(2, 2)，而其他瀏覽器包括IE9 則將傳統的(0,0)作為起點坐標。因此，就需要在一開始檢查一下位于(0,0)處的元素的位置，在IE8 及更早版本中，會返回(2,2)，而在其他瀏覽器中會返回(0,0)。 ### 9.4.3 遍歷 DOM2 級遍歷和范圍”模塊定義了兩個用于輔助完成順序遍歷DOM 結構的類型：`NodeIterator和TreeWalker`。這兩個類型能夠基于給定的起點對DOM 結構執行深度優先（depth-first）的遍歷操作。在與DOM 兼容的瀏覽器中（Firefox 1 及更高版本、Safari 1.3 及更高版本、Opera 7.6 及更高版本、Chrome0.2 及更高版本），都可以訪問到這些類型的對象。IE 不支持DOM 遍歷。使用下列代碼可以檢測瀏覽器 對DOM2 級遍歷能力的支持情況。 ~~~ var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0"); var supportsNodeIterator = (typeof document.createNodeIterator == "function"); var supportsTreeWalker = (typeof document.createTreeWalker == "function"); ~~~ **NodeIterator是一個簡單的接口，只允許以一個節點的步幅前后移動。而TreeWalker在提供相同功能的同時，還支持在DOM結構的各個方向上移動，包括父節點、同輩節點和子節點等方向。** ### 9.4.4 范圍 為了讓開發人員更方便地控制頁面，“DOM2 級遍歷和范圍”模塊定義了“范圍”（range）接口。通過范圍可以選擇文檔中的一個區域，而不必考慮節點的界限（選擇在后臺完成，對用戶是不可見的）。在常規的DOM 操作不能更有效地修改文檔時，使用范圍往往可以達到目的。Firefox、Opera、Safari 和Chrome 都支持DOM 范圍。IE 以專有方式實現了自己的范圍特性。 * 范圍是選擇DOM結構中特定部分，然后再執行相應操作的一種手段。 * 使用范圍選取可以在刪除文檔中某些部分的同事，包吃文檔結構的格式良好，或者復制文檔中的相應部分。