1. 程式人生 > >JS中通用的contains方法判斷兩個節點的關係

JS中通用的contains方法判斷兩個節點的關係

“我生本無鄉,心安是歸處”

function contains(refNode, otherNode){
    if (typeof refNode.contains == "function" &&
    (!client.engine.webkit || client.engine.webkit >= 522)){
    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; } }

這個函式組合使用了三種方式來確定一個節點是不是另一個節點的後代。函式的第一個引數是參考節點,第二個引數是要檢查的節點。在函式體內,首先檢測 refNode 中是否存在 contains() 方法(能力檢測)。這一部分程式碼還檢查了當前瀏覽器所用的 WebKit 版本號。如果方法存在而且不是 WebKit( !client.engine.webkit ),則繼續執行程式碼。否則,如果瀏覽器是 WebKit 且至少是 Safari 3(WebKit版本號為 522 或更高),那麼也可以繼續執行程式碼。在 WebKit 版本號小於 522 的 Safari 瀏覽器中,contains() 方法不能正常使用。
接下來檢查是否存在 compareDocumentPosition() 方法,而函式的最後一步則是自 otherNode開始向上遍歷 DOM 結構,以遞迴方式取得 parentNode ,並檢查其是否與 refNode 相等。在文件樹的頂端, parentNode 的值等於 null ,於是迴圈結束。這是針對舊版本 Safari 設計的一個後備策略