判断元素之间的包含关系contains和compareDocumentPosition详解

最新推荐文章于 2025-09-22 10:30:20 发布

原创最新推荐文章于 2025-09-22 10:30:20 发布 · 1.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript

当前文章被收录于：

javascript

47 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细介绍了如何使用contains方法检查DOM元素是否包含另一个元素，以及compareDocumentPosition方法来确定两个DOM节点之间的位置关系。通过具体示例展示了这些方法的实际应用。

`contains`

document.documentElement.contains(document.body);    //true

`compareDocumentPosition`

a.compareDocumentPosition(b)返回数字，含义如下：

0 : a===b
1 : 不包含，不属于同一个文档
2 : a位于b之后
4 : a位于b之前
8 : b包含a
16：a包含b

var html = document.documentElement;
var body = document.body;
html.compareDocumentPosition(body);  //返回20,即4+16，因为html在body之前且html包含body 

body.compareDocumentPosition(html);  //返回10,即2+8

html.compareDocumentPosition(html);   //返回0,不包含

假设first是second的前一个兄弟元素，则

first.compareDocumentPosition(second);

返回4。

假设HTML为<body class="class" id="id"></body>

var attr = document.body.attributes;
//attr[0]返回class="class"
//attr[1]返回id="id"
attr[1].compareDocumentPosition(attr[0]);//返回34，因为id在class之后，因此有2，且是同一个元素的不同属性，则为32，因此2+32即34；