断定一个节点在DOM树中

时间 2019-11-13

标签断定一个节点 dom 栏目 HTML 繁體版

原文原文链接

javascript contains方法

IE有许多好用的方法，后来都被其余浏览器抄袭了，好比这个contains方法。若是A元素包含B元素，则返回true，不然false。惟一不支持这个方法的是IE的死对头firefox。javascript

 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差很少，但返回的不是一个布尔值，而是一个很奇怪的数值，它是经过以下方式累加计算出来的：html

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给出以下解决方法。java

 
         if  
         (window.Node && Node.prototype && !Node.prototype.contains){ 
        
         Node.prototype.contains =  
         function  
         (arg) { 
        
         return  
         !!( 
         this 
         .compareDocumentPosition(arg) & 16) 
        
         } 
        
         }

我搞出个更短的：node

 
         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>

 
         //2011.9.24 by 司徒正美  
        
         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 
         ; 
        
         }

 
         //2013.1.24 by 司徒正美  
        
         var  
         contains  =   
         function 
         (a, b, itself){ 
        
         // 第一个节点是否包含第二个节点 
        
         //contains 方法支持状况：chrome+ firefox9+ ie5+, opera9.64+(估计从9.0+),safari5.1.7+ 
        
         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 
         ; 
        
         },