IE有许多好用的方法，后来都被其他浏览器抄袭了，比如这个contains方法。如果A元素包含B元素，则返回true，否则false。唯一不支持这个方法的是IE的死对头firefox。
1 <!doctype html>
2 <title>dom contains 方法 by 司徒正美</title>
3 <meta charset="utf-8"/>
4 <meta name="keywords" content="dom contains 方法 by 司徒正美" />
5 <meta name="description" content="dom contains 方法 by 司徒正美" />
6
7 <script type="text/javascript">
8 window.onload = function(){
9 var A = document.getElementById('parent'),
10 B = document.getElementById('child');
11 alert(A.contains(B));
12 alert(B.contains(A));
13 }
14 </script>
15 <h2 style="text-align:center">contains方法</h2>
16
17 <div id="parent">
18 <p>
19 <strong id="child" >本例子会在火狐中会报错。</strong>
20 </p>
21 </div>
不过火狐支持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 |
浏览器的私有使用 |
<!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>
PPK给出如下解决方法。
if (window.Node && Node.prototype && !Node.prototype.contains){
Node.prototype.contains = function (arg) {
return !!(this.compareDocumentPosition(arg) & 16)
}
}
|
我搞出个更短的：
if(!!window.find){
HTMLElement.prototype.contains = function(B){
return this.compareDocumentPosition(B) - 19 > 0
}
}
|
<!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">
if(!!window.find){
HTMLElement.prototype.contains = function(B){
return this.compareDocumentPosition(B) - 19 > 0
}
}
window.onload = function(){
var A = document.getElementById('parent'),
B = document.getElementById('child');
alert(A.contains(B));
alert(B.contains(A));
}
</script>
<h2 style="text-align:center">contains方法</h2>
<div id="parent">
<p>
<strong id="child" >contains方法</strong>
</p>
</div>
var contains = function(root, el) {
if (root.compareDocumentPosition)
return root === el || !!(root.compareDocumentPosition(el) & 16);
if (root.contains && el.nodeType === 1){
return root.contains(el) && root !== el;
}
while ((el = el.parentNode))
if (el === root) return true;
return false;
}
|
var contains = function(a, b, itself){
if(itself && a == b){
return true
}
if(a.contains){
if(a.nodeType === 9 )
return true;
return a.contains(b);
}else if(a.compareDocumentPosition){
return !!(a.compareDocumentPosition(b) & 16);
}
while ((b = b.parentNode))
if (a === b) return true;
return false;
},
|