javascript contains方法来判断元素包含关系

最新推荐文章于 2025-05-24 14:45:57 发布

ivan820819

最新推荐文章于 2025-05-24 14:45:57 发布

阅读量4k

点赞数

分类专栏： javascript 文章标签： javascript 文档 function 浏览器 ie c

javascript 专栏收录该内容

97 篇文章

订阅专栏

本文深入探讨了IE中的`contains`方法与W3C的`compareDocumentPosition`方法在判断DOM节点关系上的差异与应用。通过详细分析两者的工作原理，揭示了`contains`方法的简单性与`compareDocumentPosition`方法的复杂性，并提供了通用的解决方案以兼容不同浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自：http://js8.in/934.html

IE中的contains方法可以判断A元素是否包含B元素，如果包含则返回true，否则返回false，在开发中会在事件代理处理上面用到。W3C的方法是compareDocumentPosition，所以综上来说：JS通过contains和compareDocumentPosition方法来确定DOM节点间的关系,判断一个元素(对象)是否为另一个元素的子元素。
IE的contains方法很简单，但是W3C的DOMElement.contains(DOMNode)方法会返回却是一个数值。

DOMElement.contains(DOMNode)

link：https://developer.mozilla.org/En/DOM/Node.compareDocumentPosition。

DOMElement.contains(DOMNode)返回的不是一个布尔值，而是一个很奇怪的数值，它是通过如下方式累加计算出来的：

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	浏览器的私有使用

综上，来个@司徒正美大大的方案：

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