javascript contains方法

作者: 司徒正美來源: 博客園發布時間: 2009-10-27 17:43 閱讀: 3202 次推薦: 0 原文鏈接 [收藏]

IE有許多好用的方法，后來都被其他瀏覽器抄襲了，比如這個contains方法。如果A元素包含B元素，則返回true，否則false。唯一不支持這個方法的是IE的死對頭firefox。

<!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 司徒正美" /> <mce:script type="text/javascript"></mce:script> <h2 style="text-align:center" mce_style="text-align:center">contains方法</h2> <div id="parent"> <p> <b id="child" >本例子會在火狐中會報錯。</b> </p> </div>

不過火狐支持compareDocumentPosition() 方法，這是W3C制定的方法，標準瀏覽器都支持，不過實用性性很差，因此沒有什么人用，推廣不開來。它的使用形式與contains差不多，但返回的不是一個布爾值，而是一個很奇怪的數值，它是通過如下方式累加計算出來的：

如果B與A不相連（Position disconnected），加1；（怎么我死活搞不出1來呢？？？）
如果B是在A的前面，加2；
如果B是在A的后面，加4；
如果B包含A，加8；
如果B被A包含，加16。

<!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 司徒正美" /> <mce:script type="text/javascript"></mce:script> <h2 style="text-align:center" mce_style="text-align:center">compareDocumentPosition方法</h2> <div id="parent"> <p> <b id="child" >本例子請在標準瀏覽器中運行。</b> </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 司徒正美" /> <mce:script type="text/javascript"></mce:script> <h2 style="text-align:center" mce_style="text-align:center">contains方法</h2> <div id="parent"> <p> <b id="child" >contains方法</b> </p> </div>