在研究一個多級菜單聯動的js時，發現contains方法，以前沒有碰到過，不知何意，然后在@司徒正美的博客發現有詳細介紹，暫且摘錄在此。
IE有許多好用的方法，后來都被其他瀏覽器抄襲了，比如這個contains方法。如果A元素包含B元素，則返回true，否則false。唯一不支持這個方法的是IE的死對頭firefox。不過火狐支持compareDocumentPosition() 方法，這是W3C制定的方法，標准瀏覽器都支持，不過實用性性很差，因此沒有什么人用，推廣不開來。它的使用形式與contains差不多，但返回的不是 一個布爾值，而是一個很奇怪的數值，它是通過如下方式累加計算出來的：
| Bits | Number | Meaning |
|---|---|---|
| 000000 | 0 | 元素一致 |
| 000001 | 1 | 節點在不同的文檔（或者一個在文檔之外） |
| 000010 | 2 | 節點 B 在節點 A 之前 |
| 000100 | 4 | 節點 A 在節點 B 之前 |
| 001000 | 8 | 節點 B 包含節點 A |
| 010000 | 16 | 節點 A 包含節點 B |
| 100000 | 32 | 瀏覽器的私有使用 |
contains方法的應用：
1 2 <!doctype html> 3 <title>dom contains 方法 by 司徒正美</title> 4 <meta charset="utf-8"/> 5 <meta name="keywords" content="dom contains 方法 by 司徒正美" /> 6 <meta name="description" content="dom contains 方法 by 司徒正美" /> 7 8 <script type="text/javascript"> 9 window.onload = function(){ 10 var A = document.getElementById('parent'), 11 B = document.getElementById('child'); 12 alert(A.contains(B)); 13 alert(B.contains(A)); 14 } 15 </script> 16 <h2 style="text-align:center">contains方法</h2> 17 18 <div id="parent"> 19 <p> 20 <strong id="child" >本例子會在火狐中會報錯。</strong> 21 </p> 22 </div>
firefox中compareDocumentPosition方法的應用：
<!doctype html> <title>dom contains 方法 by 司徒正美</title> <meta charset="utf-8"/> <meta name="keywords" content="dom contains方法 by 司徒正美" /> <meta name="description" content="dom contains方法 by 司徒正美" /> <script type="text/javascript"> window.onload = function(){ var A = document.getElementById('parent'), B = document.getElementById('child'); alert(A.compareDocumentPosition(B));//B與A不相連，B在A的后面，B被A包含 4+16 = 20 alert(B.compareDocumentPosition(A));//A與B不相連，A在B的前面，A包含B 2+8 = 10 } </script> <h2 style="text-align:center">compareDocumentPosition方法</h2> <div id="parent"> <p> <strong id="child" >本例子請在標准瀏覽器中運行。</strong> </p> </div>
兼容contains及compareDocumentPosition方法：
1 var contains = function(a, b, itself){ 2 // 第一個節點是否包含第二個節點 3 //contains 方法支持情況：chrome+ firefox9+ ie5+, opera9.64+(估計從9.0+),safari5.1.7+ 4 if(itself && a == b){ 5 return true 6 } 7 if(a.contains){ 8 if(a.nodeType === 9 ) 9 return true; 10 return a.contains(b); 11 }else if(a.compareDocumentPosition){ 12 return !!(a.compareDocumentPosition(b) & 16); 13 } 14 while ((b = b.parentNode)) 15 if (a === b) return true; 16 return false; 17 }