javascript contains要领，附demo演示

发布时间：2018-10-10 10:23:09 所属栏目：创业来源：站长网

导读：IE有很多好用的要领，其后都被其他赏识器剽窃了，好比这个contains要领。假如A元素包括B元素，则返回true，不然false。独一不支持这个要领的是IE的死仇家firefox。 !doctype htmltitledom contains 要领 by 司徒正美/titlemeta charset=utf-8/meta name=ke

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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

不外火狐支持compareDocumentPosition() 要领，这是W3C拟定的要领，尺度赏识器都支持，不外适用性性很差，因此没有什么人用，推广不开来。它的行使情势与contains差不多，但返回的不是一个布尔值，而是一个很稀疏的数值，它是通过如下方法累加计较出来的：

<!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> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

PPK给出如下办理要领。

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] if (window.Node && Node.prototype && !Node.prototype.contains){
Node.prototype.contains = function (arg) {
return !!(this.compareDocumentPosition(arg) & 16)
}
}

我搞出个更短的：

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] 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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] 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

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网