開(kāi)發(fā)人員經(jīng)常需要確定某個(gè)給定的節(jié)點(diǎn)是不是另一個(gè)節(jié)點(diǎn)的后代。為此，IE率先引入了contains() 方法，讓開(kāi)發(fā)人員無(wú)須遍歷DOM文檔樹即可獲知此信息。應(yīng)該在作為搜索起點(diǎn)的祖先節(jié)點(diǎn)上調(diào)用contains()方法，并為該方法傳遞一個(gè)參數(shù)，即要檢測(cè)的后代節(jié)點(diǎn)。如果傳人的節(jié)點(diǎn)是當(dāng)前節(jié)點(diǎn)的 后代，那么方法返回true;否則返回false。來(lái)看下面的例子：
? ? ? ?alert(document.documentElement.contains(document.body>); //true
? ? ? ?這個(gè)例子測(cè)試元素是不是元素的后代，而在格式正確的HTML頁(yè)面中，這個(gè)例子會(huì)返回true。IE、Safari3及更高版本、Opera 8及更高版本、Chrome都支持contains()方法。Safari2x中雖然也有這個(gè)方法．但無(wú)法正常使用。因此，需要通過(guò)瀏覽器檢測(cè)來(lái)確定Safari的版本，以保證 可以正常使用這個(gè)方法。
? ? ? ?Firefox不支持contains()方法，但Firefox在DOM3級(jí)實(shí)現(xiàn)中提供了一個(gè)替代的compareDocumentPosition()方法（Opera 9.5及更高版本也支持此方法）。這個(gè)方法用于確定兩個(gè)節(jié)點(diǎn)之間的關(guān)系，返回一個(gè)表示該關(guān)系的位掩碼( bitmask)。下表列出了這個(gè)位掩碼的值。?
? ? ? ?為模仿contains()方法，應(yīng)該關(guān)注的是掩碼16。可以對(duì)compareDocumentPosition()的結(jié)果執(zhí)行按位與，以確定參考節(jié)點(diǎn)(調(diào)用compareDocumentPosition()方法的當(dāng)前節(jié)點(diǎn)）是否包含給定的節(jié)點(diǎn)（傳人的節(jié)點(diǎn)）。來(lái)看下面的例子：
? ? ? ?var result=document.documentElement. compareDocumentPosition( document. body);
? ? ? ?alert(!!(result&16));
? ? ? ?執(zhí)行上面的代碼后，結(jié)果會(huì)變成20（表示“居后”的4加上表示“被包含”的16）。對(duì)掩碼16 執(zhí)行按位操作會(huì)返回一個(gè)非零數(shù)值，而兩個(gè)邏輯非操作符會(huì)將該數(shù)值轉(zhuǎn)換成布爾值。
? ? ? ?使用一些瀏覽器及能力檢測(cè)，就可以寫出如下所示的一個(gè)通用的contains()函數(shù)：
? ? ? ?function contains( refNode, otherNode){
? ? ? ? ? ? ? if (typeof refNode. contains==”function”&&
? ? ? ? ? ? ? ? ? ? ?(! client. engine .webkit ff 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：
? ? ? ? ? ? ? }
? ? ? ?}
? ? ? ?這個(gè)函數(shù)使用了三種方法來(lái)確定一個(gè)節(jié)點(diǎn)是不是另一個(gè)節(jié)點(diǎn)的后代。函數(shù)的第一個(gè)參數(shù)是參考節(jié)點(diǎn)，第二個(gè)參數(shù)是要檢查的節(jié)點(diǎn)。在函數(shù)體內(nèi)，首先檢測(cè)refNode中是否存在contains()方法（能力檢測(cè)）。這一部分代碼還檢查了當(dāng)前瀏覽器所用的WebKit版本號(hào)。如果方法存在而且不是WebKit （! client．engine．webkit），則繼續(xù)執(zhí)行代碼。否則，如果瀏覽器是WebKit且至少是Safari 3 (WebKit版本號(hào)為522或更高)，那么也可以繼續(xù)執(zhí)行代碼。在WebKit版本號(hào)小于522的Safari瀏覽器中， contains()方法不能正常使用。
? ? ? ?接下來(lái)檢查是否存在compareDoumentPosition()方法，而函數(shù)的最后一步則是自otherNode 開(kāi)始向上遍歷DOM結(jié)構(gòu)，遞歸地取得parentNode并檢查是否與refNode相等。在文檔樹的頂端， parentNode的值等于null，于是循環(huán)結(jié)束。這是針對(duì)舊版本Safari設(shè)計(jì)的一個(gè)后備策略。
? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://m.gimmickmag.com/如轉(zhuǎn)載請(qǐng)注明出處!