DOMJS高級程序設計筆記——DOM2和DOM3

DOM1級主要定義了HTML和XML文檔的底層結構，DOM2和DOM3則在DOM1的基礎上引入了更多的交互功能，支持了更高級的XML特性。DOM2和DOM3分爲許多模塊（模塊之間具備某種聯繫），這些模塊以下：

• DOM2級核心：在1級核心基礎上，爲節點添加了更多方法和屬性。

• DOM2級視圖：爲文檔定義了基於樣式信息的不一樣視圖

• DOM2級HTML：在1級HTML基礎上構建，添加了更多屬性、方法和新接口

• DOM2級樣式：定義瞭如何以編程方式來訪問和改變CSS樣式信息

• DOM2級遍歷和範圍：引入了遍歷DOM文檔和選擇其特定部分的新接口

• DOM2級事件：說明了如何以編程方式來訪問和改變CSS樣式

• DOM3級XPath

• DOM3級加載與保存

1、DOM的變化

（一）針對xml命名空間的變化

有了XML命名空間，不一樣XML文檔的元素就能夠混合在一塊兒，共同構成格式良好的文檔，而沒必要擔憂發生命名衝突。從技術上說，HTML不支持XML命名空間，但XHTML支持XML命名空間。

在此，先不討論針對xml命名空間的變化，後續有須要再進行更新。

（二）其餘方面的變化

其餘方面的變化與XML命名空間無關，這些變化是爲了確保API的可靠性及完整性

一、DocumentType類型的變化

DocumentType類型新增了3個屬性（在網頁中不多須要使用如下三個屬性訪問此類信息）：

• publicId

• systemId

• internalSubset

二、Document類型的變化

三、Node類型的變化

四、框架的變化

2、樣式

（一）訪問元素的樣式

一、DOM style屬性的屬性和方法

DOM2級樣式規範爲style對象定義了一些屬性和方法：

• cssText：返回style屬性中的CSS代碼

• length：HTML元素的style屬性中包含的CSS屬性的個數

• item(index):

• getPropertyValue(propertyName)

• getPropertyCSSValue(propertyName)：返回一個CSSValue（實際開發中用得不多）

• getPropertyPriority(propertyName)：若屬性使用了!important設置，則返回"!important"；不然，返回空字符串

• removeProperty(propertyName)

• setProperty(propertyName,value,priority):參數priority的取值爲"!important"或空字符串

• parentRule:表示CSS信息的CSSRule對象

二、計算的樣式

元素的style對象只包含經過style屬性設置的樣式信息，不包含其餘樣式表中的信息。爲了獲得應用在當前元素的全部樣式，DOM2級增長了document.defaultView屬性，併爲該屬性提供了getComputedStyle()方法。

• 語法：document.default.getComputedStyle(要取得樣式的元素, 僞元素字符串)（僞元素字符串如：":after"，若不須要僞元素信息，則該參數爲null）

• getComputedStyle()返回一個CSSStyleDeclaration對象，包含應用在當前元素的全部樣式。

var div = document.getElementById("#myDiv");
var computedStyle = document.defaultView.getComputedSytle(div,null);

IE不支持getComputedStyle()，但它爲每一個支持style屬性的元素指定了currentStyle屬性，這個屬性返回一個CSSStyleDeclaration對象。

var div = document.getElementById("#myDiv");
var computedStyle = div.currentStyle;

（二）操做樣式表

• 能夠用CSSStyleSheet類型來表示樣式表，它包括<link>元素包含的樣式表和<style>元素中定義的樣式表。

• DOM2級定義了獲取樣式表的屬性，返回CSSStyleSheet對象，該對象是一套只讀的接口。

• document.styleSheets返回的是應用於文檔的全部樣式表的對象集合

• 還能夠經過<link>或<style>元素直接獲取CSSStyleSheet對象，獲取的方式是使用sheet屬性（非IE），或styleSheet屬性（IE）

  function getStyleSheet(element){
      return element.sheet || element.styleSheet;
  }
  //獲取第一<link>元素引入的樣式表
  var link = document.getElementsByTagName("link")[0]
  var sheet = getStyleSheet(link);

一、CSS規則

CSSRule表示樣式表中的每一條規則。其實，CSSRule是一個供其餘多種類型繼承的基類型，其中最多見的是CSSStyleRule，表示樣式信息。CSSStyleRule對象包含下列屬性：

（1） cssText：返回整條規則對應的文本（包括CSS選擇符和花括號）
（2）selectorText：返回當前規則的選擇符
（3）style：一個CSSStyleDeclaration對象（style.cssText返回規則中全部的CSS樣式）
（4）parentRule：
（5）parentStyleSheet：當前規則所屬的樣式表
（6）type：表示規則類型的常量值。

上述屬性中，前三個經常使用。

二、建立規則

• 使用insertRule()能夠向現有樣式表中添加新規則

• 語法：sheet.insertRule(規則文本，插入規則的位置)

  sheet.insertRule("body{background-color:silver;}",0);

• IE8及更早版本支持一個相似的方法：addRule(選擇符文本，CSS樣式信息，插入規則的位置)

  sheet.addRule("body","background-color:silver",0);

• 若要添加的規則很是多，請使用動態加載樣式表的技術

三、刪除規則

若要刪除某天規則，請使用deleteRule(index)

sheet.deleteRule(0) //IE以外的瀏覽器
sheet.removeRule(0) //IE

//跨瀏覽器刪除規則的函數
function deleteRule(sheet, index){
    if(sheet.deleteRule){
        sheet.deleteRule(index);
    }
    else if(sheet.removeRule){
        sheet.removeRule(index);
    }
}

請慎用刪除規則的方法

（三）元素的大小

下面介紹的屬性和方法並不屬於「DOM2級樣式」規範，但卻與HTML元素的樣式息息相關。

一、偏移量

元素的偏移量涉及4個屬性（這些偏移量屬性都是隻讀的，每次訪問都會從新計算）：

• offsetHeight：包含可見的垂直滾動條高度

• offsetWidth：包含可見的垂直滾動條寬度

• offsetLeft

• offsetTop

下圖反映了上述4個屬性的表示範圍：

二、客戶區大小

客戶區大小指的是，元素內容及其內邊距所佔據的空間大小（不包括滾動條及邊框）
與客戶區大小有關的屬性有兩個：

• clientWidth

• clientHeight

下圖反映了上述兩個屬性的表示範圍：

3、範圍

DOM2級爲Document類型定義了createRange()方法，該方法能夠建立範圍：

var range = document.createRange();

每個範圍由一個Range類型的實例表示，該實例擁有不少屬性和方法，下列屬性提供了當前範圍在文檔中的位置信息：

• startContainer：選區中第一個節點的父節點

• startOffset：範圍中第一個子節點的索引

• endContainer：選區中最後一個節點的父節點

• endOffset：範圍中最後一個子節點的索引

• commonAncestorContainer

（一）用範圍實現簡單選擇

如下方法能夠實現選擇文檔中的一部分：

1. selectNode(DOM節點):選擇整個DOM節點

2. selectNodeContents(DOM節點)：只選擇節點的子節點

3. setStartBefore(redNode)：將範圍的七點設置在refNode以前

4. setStartAfter(refNode)：將範圍的起點設置在refNode以後

5. setEndBefore(refNode):將範圍的終點設置在refNode以前

6. setEndAfter(refNode)：將範圍的終點設置在refNode以後

（二）用DOM範圍實現複雜選擇

DOM2級建立的範圍，不只可以選擇節點，還可以選擇節點的一部分，使用下面兩個方法能夠完成這種操做：

1. setStart(參照節點，偏移量)

2. setEnd(參照節點，偏移量)

例若有以下HTML代碼：

<!DOCTYPE html>
<html lang="en">
    <body>
        <p id="p1"><b>Hello</b> world!</p>
    </body>
</html>

咱們想從「Hello world!」中選取「llo wo」，代碼以下：

var p1 = document.getElementById("p1");
var helloNode = p1.firstChild.firstChid;
var worldNode = p1.lastChid;

var range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

利用範圍選擇了文檔的某一部分，接下來即可以對選擇的部分進行操做。

（三）操做DOM範圍中的內容

在上述的例子中，範圍會自動爲自身添加相應的HTML標籤，上例建立範圍完成後的HTML代碼以下：

<p><b>He</b><b>llo</b> world!</p>

這樣建立範圍後，就可使用各類方法對範圍的內容進行操做了

一、deleteContents()：從文檔中刪除範圍包含的內容

var p1 = document.getElementById("p1");
var helloNode = p1.firstChild.firstChid;
var worldNode = p1.lastChid;

var range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

range.deleteContents();

運行上述代碼後輸出結果：

二、extractContents()：從文檔中移除範圍選區，並返回範圍的文檔片斷

var p1 = document.getElementById("p1");
var helloNode = p1.firstChild.firstChid;
var worldNode = p1.lastChid;

var range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

var fragement = range.extractContents();
p1.parentNode.appendChild(fragement);

運行上述代碼後輸出結果：

三、cloneContents()：建立範圍對象的一個副本

var p1 = document.getElementById("p1");
var helloNode = p1.firstChild.firstChid;
var worldNode = p1.lastChid;

var range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

var fragement = range.cloneContents();
p1.parentNode.appendChild(fragement);

運行上述代碼後輸出結果：

（四）向範圍中插入內容

一、insertNode()：向範圍選區的開始處插入一個節點

假設向前面例子中的範圍前插入如下HTML代碼：

<span style="color:red">Inserted text</span>

則js代碼以下：

var p1 = document.getElementById("p1");
var helloNode = p1.firstChild.firstChid;
var worldNode = p1.lastChid;

var range = document.createRange();
range.setStart(helloNode, 2);
range.setEnd(worldNode, 3);

var span = document.creatElement("span");
span.style.color = "red";
span.appendChild(document.createTextNode("Inserted text"));
range.insertNode(span);

運行上述代碼後輸出結果：

二、surroundContents(環繞範圍內容的節點)：環繞範圍插入內容

利用該方法能夠突出顯示網頁中的某些詞句，代碼以下：

var p1 = document.getElementById("p1");
var helloNode = p1.firstChild.firstChid;
var worldNode = p1.lastChid;

var range = document.createRange();
range.selectNode(helloNode);

var span = document.createElement("span");
span.style.backgroundColor = "yellow";
range.surroundContents(span);

代碼運行的結果以下：

（五）摺疊範圍

1. 摺疊範圍，就是指範圍中未選擇文檔的任何部分。

2. collapse()方法能夠摺疊範圍，該方法接受一個布爾值的參數：

   • 參數取值爲true：摺疊到範圍的起點

   • 參數取值爲false：摺疊到範圍的終點

3. collapse屬性能夠檢測範圍是否處於摺疊狀態

（六）比較範圍

1. compareBoundaryPoints()方法能夠比較多個範圍的起點（或終點）

2. 該方法接受兩個參數：

   • 表示比較方式的常量（有如下四個取值）

     • Range.START_TO_START：比較第一個範圍和第二個範圍的起點

     • Range.START_TO_END

     • Range.END_TO_END

     • Range.END_TO_START

   • 要比較的範圍

3. 該方法有三個可能的返回值：

   • 返回-1：第一個範圍中的點位於第二個範圍中的點以前

   • 返回0：兩個點相等

   • 返回1：第一個範圍中的點位於第二個範圍中的點以後

（七）複製範圍

cloneRange()方法能夠複製範圍

var newRange = range.cloneRange();

以上代碼建立了一個range的副本，newRange與range有相同的屬性，修改newRange不會影響原來的範圍。

（八）清理範圍

在使用完範圍後，最好是從建立範圍的文檔中分離出該範圍，從而可讓垃圾回收機制回收其內存。

range.detach(); //從文檔中分離
range = null;   //解除引用

推薦在使用完範圍後再執行上述兩個步驟。