您当前位置：首页 > web前端 > jscript > javascript contains方法，附demo演示

javascript contains方法，附demo演示

来源：程序员人生发布时间：2014-02-01 23:06:04 阅读次数：3921次

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 司徒正美" /><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" >本例子会在火狐中会报错。</strong></p></div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

不过火狐支持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	浏览器的私有使用

<!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" >本例子请在标准浏览器中运行。</strong></p></div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

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 司徒正美" /><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>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

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

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生