javascript中的contains方法和compareDocumentPosition方法

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方法的应用:

javascript中的contains方法和compareDocumentPosition方法
 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>
javascript中的contains方法和compareDocumentPosition方法

firefox中compareDocumentPosition方法的应用:

javascript中的contains方法和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>
javascript中的contains方法和compareDocumentPosition方法

解决方法:

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

兼容contains及compareDocumentPosition方法:

javascript中的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 }
javascript中的contains方法和compareDocumentPosition方法
上一篇:HDU-1179-Ollivanders(二分图最大匹配)


下一篇:JavaScript中的apply()方法和call()