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

最新推荐文章于 2021-06-16 18:59:48 发布

我就是陈星烨

最新推荐文章于 2021-06-16 18:59:48 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u012657197/article/details/75257584

版权

javascript 专栏收录该内容

47 篇文章

订阅专栏

`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；