斷定一個節點在DOM樹中

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 ;
      },
相關文章
相關標籤/搜索