JavaScript文檔物件模型-DOM擴充-js教程-PHP中文網

JavaScript文檔物件模型-DOM擴充

黄舟

發布： 2017-01-20 14:44:23

原創

1235 人瀏覽過

根據W3C對DOM的要求，瀏覽器可以自行為它添加屬性和方法，以增強其功能。新增加的部分功能是為了向後相容，而另一些功能則是根據開發人員的回饋，這對常見問題而添加的。

呈現模式

從IE6開始，IE瀏覽器區分標準模式和混雜模式，這就需要我們在使用的時候區分瀏覽器處於何種模式下。 IE為document物件新增了一個名為compatMode的屬性，這個屬性的唯一任務就是辨識瀏覽器處於什麼模式下。例如下面的例子，如果是標準模式，則document.compatMode的值等於「CSS1Compat」；如果是混雜模式，document.compatMode的值等於「BackCompat」。

if(document.compatMode == "CSS1Compat"){
    alert("标准模式");
}else{
    alert("混杂模式");
}

登入後複製

在IE之後，Firefox、Chrome和Opera瀏覽器也都實現了這個屬性。 Safari瀏覽器從3.1版本開始實作document.compatMode屬性。

後來，IE8又為document物件引入一個名為documentMode的新屬性。它的用法如下所示。

if(document.compatMode > 7){
    alert("IE8+ 标准模式");
}

登入後複製

這是因為IE8有3種不同的呈現模式，引入這個屬性正是為了區分這些模式。這個屬性的值如果是5，則表示混雜模式（即IE5模式），如果值為7，則表示IE7仿真模式，如果是8，則表示IE8標準模式。

contains()方法

我們在操作DOM的時候常常需要判斷某個給定的節點是不是另外一個節點的後代節點。 IE瀏覽器最先引入了一個contains()方法，該方法可以在不遍歷整個DOM樹的情況下就可取得該資訊。 contains()方法應該在作為搜尋起點的祖先節點上調用，該方法接收一個參數，即要偵測的後代節點。如果傳入的節點是目前節點的後代，那麼會回傳true，否則回傳false。例如

alert(document.documentElement.contains(document.body));   //true

登入後複製

上面的範例測試元素是不是元素的後代，如果是格式正確的HTML頁面，那麼它就會回傳true。

IE，Safari3+，Opera8+和Chrome瀏覽器都支援contains()方法。

Firefox瀏覽器不支援contains()方法，但是Firefox在DOM3級中實作了一個替代的方法：compareDocumentPosition()方法。（Opera9.5+的瀏覽器也支援此方法）。這個方法用來確定兩個節點之間的關係，傳回一個表示該關係的位元遮罩（bitmark）。下表中列出了這個位元遮罩的值。

JavaScript文檔物件模型-DOM擴充

如果需要模仿contains()方法，那麼應該要關注的是掩碼16。可以對compareDocumentPosition()方法的結果執行位元與操作，以確定參考節點（呼叫compareDocumentPosition()方法的目前節點）是否包含給定的節點（作為參數傳入的節點）。例如下面的例子：

var result = document.documentElement.compareDocumentPosition(document.body);
console.info("result="+result);
console.info("按位与操作后的布尔值结果为："+!!(result & 16));

登入後複製

JavaScript文檔物件模型-DOM擴充

上面的程式碼在執行compareDocumentPosition()方法後，得到的結果為20，表示「居後」的4和「被包含」的16。然後對掩碼16進行位元與操作會傳回一個非零數值。兩個邏輯非操作符的作用是將數值轉換為布林值類型。

我們可以透過瀏覽器的能力來偵測來寫一個通用的contains()函數。

/*********************************************************/
/* 浏览器通用contains()方法
/* 参数：refNode - 参考节点 */
/* 参数：otherNode - 要检测的节点 */
/* 返回值： refNode包含otherNode是返回true，否则返回false*/
/*********************************************************/
function contains(refNode,otherNode){
    if(typeof refNode.contains == "function"){
        return refNode.contains(otherNode);
    }else if(typeof refNode.compareDocumentPosition == "function"){
        return !!(refNode.compareDocumentPosition(otherNode) & 16);
    }else{
        var node = otherNode.parentNode;
        do{
            if (node === refNode) {
                return true;
            }else{
                node = node.parentNode;
            }
        }while(node !== null);
        return false;
    }
}

登入後複製

這個通用contains()函數使用3種方法來決定某個節點是不是另外一個節點的後代節點。函數的第一個參數是參考節點，第二個參數是要偵測的節點。

在函數體內，首先檢測refNode中是否存在contains()方法，接下來檢測是否有compareDocumentPosition()方法，函數的最後一步是從otherNode開始向上遍歷DOM樹，遞歸獲取parentNode並檢查是否和refNode相等。在文檔樹的頂端，parentNode的值等於null，於是迴圈結束。

以上就是JavaScript文檔物件模型-DOM擴充的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！