您當(dāng)前位置：首頁(yè) > web前端 > jscript > javascript contains方法，附demo演示

javascript contains方法，附demo演示

來源：程序員人生發(fā)布時(shí)間：2014-02-01 23:06:04 閱讀次數(shù)：4648次

IE有許多好用的方法，后來都被其他瀏覽器抄襲了，比如這個(gè)contains方法。如果A元素包含B元素，則返回true，否則false。唯一不支持這個(gè)方法的是IE的死對(duì)頭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 司徒正美" /><script type="text/javascript">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" >本例子會(huì)在火狐中會(huì)報(bào)錯(cuò)。</strong></p></div><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運(yùn)行!

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

Bits	Number	Meaning
000000	0	元素一致
000001	1	節(jié)點(diǎn)在不同的文檔（或者一個(gè)在文檔之外）
000010	2	節(jié)點(diǎn) B 在節(jié)點(diǎn) A 之前
000100	4	節(jié)點(diǎn) A 在節(jié)點(diǎn) B 之前
001000	8	節(jié)點(diǎn) B 包含節(jié)點(diǎn) A
010000	16	節(jié)點(diǎn) A 包含節(jié)點(diǎn) 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 = 20alert(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" >本例子請(qǐng)?jiān)跇?biāo)準(zhǔn)瀏覽器中運(yùn)行。</strong></p></div><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運(yùn)行!

PPK給出如下解決方法。

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

我搞出個(gè)更短的：

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><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運(yùn)行!

descendantOf: function(element, ancestor) {
if (element.compareDocumentPosition)
return (element.compareDocumentPosition(ancestor) & 8) === 8;
if (ancestor.contains)
return ancestor.contains(element) && ancestor !== element;
while (element = element.parentNode)
if (element == ancestor) return true;

return false;

},

作者：Ruby's Louvre 出處：http://www.cnblogs.com/rubylouvre

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

javascript contains方法，附demo演示