向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;
}
}