javascript contains方法

encienqi發表於2011-02-20

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> <strong id="child" >本例子會在火狐中會報錯。</strong> </p> </div>

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

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

JavaScript contains()
2019-11-04
JavaScriptAI
ArrayList的contains方法與Object的equals方法的關係
2016-04-11
AIObject
java——ArrayList中contains（）方法中的疑問
2019-02-28
JavaAI
contains a file system with errors, check forced解決方法
2015-03-17
AIError
jQuery :contains()
2018-02-01
jQueryAI
C# 有關List<T>的Contains與Equals方法
2022-05-01
C#AI
jQuery.contains()
2017-02-19
jQueryAI
sga contains infomation (71)
2007-10-18
AI
JavaScript Date() 方法
2019-12-03
JavaScript
JavaScript show() 方法
2019-08-01
JavaScript
JavaScript showModal() 方法
2019-08-01
JavaScript
JavaScript repeat()方法
2018-08-31
JavaScript
JavaScript map()方法
2018-09-05
JavaScript
JavaScript copyWithin()方法
2018-09-03
JavaScript
JavaScript match()方法
2018-09-03
JavaScript
JavaScript find()方法
2018-09-16
JavaScript
JavaScript test() 方法
2018-02-01
JavaScript
JavaScript endsWith()方法
2018-01-23
JavaScript
javascript isFinite()方法
2017-03-31
JavaScript
javascript slice() 方法
2017-04-06
JavaScript
a control file contains information
2007-04-20
AIORM
轉：ArrayList：用Set代替contains
2009-07-20
AI
全文索引——CONTAINS 語法
2007-09-11
索引AI
javascript的match方法
2019-04-07
JavaScript
JavaScript Array map() 方法
2019-03-19
JavaScript
JavaScript 之迭代方法
2019-07-14
JavaScript
javascript通用方法收集
2021-09-09
JavaScript
JavaScript toggle() 方法
2018-11-11
JavaScript
JavaScript之FormData方法
2020-11-03
JavaScriptORM
Javascript 加密解密方法
2023-03-28
JavaScript加密解密
JavaScript陣列方法
2018-03-16
JavaScript陣列
JavaScript Array常用方法
2018-04-08
JavaScript
javascript模板方法模式
2015-09-03
JavaScript模式
LeetCode-Contains Duplicate II
2016-09-12
LeetCodeAI
JavaScript手寫new方法
2020-06-29
JavaScript
JavaScript陣列小方法
2019-02-27
JavaScript陣列
javascript Array.from()方法
2019-05-30
JavaScript
javascript中Date常用方法
2021-09-09
JavaScript

javascript contains方法

相關文章