《JS高程(3)》DOM擴展-專有擴展-第11章筆記(21)

向DOM中添加專有擴展,以彌補功能上的不足。

文檔模式

IE8引入了一個新的概念叫“文檔模式”,頁面的文檔模式決定了可以使用什麼功能,文檔模式決定了你可以使用哪個級別的CSS,可以在JavaScript中可以使用哪些API,以及如何對待文檔類型,到了IE9,總共有4中文檔模式。

children屬性

children屬性時HTMLCollection的實例,只包含元素中同樣還是元素的子節點,除此之外,children屬性與childNodes沒有什麼區別

var childCount = element.children.length;
var childCount = element.children[0];

contains()方法

用於確認某個節點是不是另一個節點的後代。
祖先節點調用contain()方法,也就是搜索開始的節點,接受一個參數,既要檢測的後代節點。
如果被檢測的節點是後代節點,該方法返回true,否則返回false:

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

測試<body>元素是不是<html>元素的後代,在格式正確的HTML頁面中,以上代碼返回true。支持contains()方法的瀏覽器有IE、Firefox9+、Safari、Opera和Chrome.
使用DOMLevel3 compareDocumentPosition()也能夠確定節點間的關係。

掩碼 節點關係
1 無關(給定的節點不在當前文檔中)
2 居前(給定的節點DOM樹中位於參考節點之前)
4 居後(給定的節點DOM樹中位於參考節點之後)
8 包含(給定的節點是參考節點的祖先)
16 被包含(給定的節點是參考節點的後代)

爲模仿contains()方法,應該關注的是掩碼16。可以對compareDocumentPostion()的結果執行按位與,已確定參考節點(調用compareDocumentPosition()方法的當前節點)是否包含給定的節點(傳入的節點)。

var result = document.documentElement.compareDocumentPosition(document.body);
alert(!!(result & 16));
//第一個參數是參考節點,第二個參數是要檢查的節點
function contains(refNode, otherNode){
//檢測refNode中是否存在contains()方法(能力檢測)
    if(typeof reNode.contains == "function" && 
    //檢測當前瀏覽器所用的webkit版本號,版本號>=522則繼續執行
(!client.engine.webkit || client.engine.webkit >= 522)){
    return refNode.contains (otherNode);
    //檢測refNode中是否存在compareDocumentPosition ()方法(能力檢測)
    }else if(typeof refNode.compareDocumentPosition =="function"){
    return !! (refNode.compareDocumentPosition(otherNode) & 16);
    }else{
        var node =otherNode.parentNods;
        do{
            if(node === refNode){
                return true;
            }else{
                node = node.parentNode;
            }
        }while (node !== null);
        return false;
    }
}

插入文本

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章