jscontains方法實(shí)現(xiàn)代碼_javascript技巧

為了兼容IE和FF我們不得不用以下方法：
<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> <p> contains方法 </p><script type="text/javascript" src="https://jss.m.alabama37th.com/pcwz/wenzhong.js"></script>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
不過火狐支持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	瀏覽器的私有使用

<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> <p> 本例子請(qǐng)?jiān)跇?biāo)準(zhǔn)瀏覽器中運(yùn)行。 </p>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]

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
}
}

<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> <p> contains方法 </p>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
代碼如下:
//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;
}

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com