使用compareDocumentPosition比较两个元素在文档中的位置

最新推荐文章于 2023-07-09 18:39:38 发布

weixin_30693183

最新推荐文章于 2023-07-09 18:39:38 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Raoh/p/js_compareDocumentPosition_between_two_node.html

本文介绍如何使用compareDocumentPosition方法来确定两个DOM节点之间的位置关系。该方法返回一个整数，通过对这个整数进行位运算可以解析出节点之间的具体位置信息。

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

PS:尊重原创，转载请注明来自http://www.cnblogs.com/Raoh/p/js_compareDocumentPosition_between_two_node.html

使用compareDocumentPosition方法比较两个节点，将会返回描述它们在文档中位置的整数。

compareDocumentPosition的枚举值
二进制值	枚举值	位置信息
000000	0	元素一致
000001	1	没有关系，两个节点不属于同一个文档
000010	2	节点 A 在节点 B 后面
000100	4	节点 A 在节点 B 前面
001000	8	节点 A 位于节点 B 内部
010000	16	节点 A 包含节点 B
100000	32	没有关系，或是两个节点是同一元素的两个属性

拿到这个整数之后，通过一些位运算，我们就能得出元素位置的详细信息。（实际上，这与C#语言中的[Flags]一个道理）

直接上示例代码：

var doc = document,
    html = doc.documentElement,
    body = doc.body;

var pos = html.compareDocumentPosition(body);//20

var after = pos & 2;//0
console.log('html在body后面',!!after);

var before = pos & 4;//4
console.log('html在body前面',!!before);

var inside = pos & 8;//0
console.log('html在body内部',!!inside);

var contain = pos & 16;//16
console.log('html包含body',!!contain);