Contains

最新推荐文章于 2020-03-23 02:35:19 发布

weixin_30611509

最新推荐文章于 2020-03-23 02:35:19 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/zhujl/archive/2012/03/08/2384514.html

版权

各个类库基本都有contains函数，检测一个元素是否包含另一个元素。核心方法不外乎两个：contains 和 compareDocumentPosition

contains是IE发明的函数，后来也有别的浏览器支持，比如Chrome，但是Firefox不支持。用法如下：

el.contains(el2);

如果 el包含el2 或 el === el2，返回true；否则返回false。

这很简单，接着说compareDocumentPosition。

这个函数来自DOM Level 3 规范，标准浏览器都支持，但IE6-8不支持，IE从9开始支持，但是仅仅是IE9模式下才管用，如果你的IE9用的是小于9的模式，自己看着办吧。这个函数的返回值有点难理解，下面细说：

HTML :

<div id="a">
    <div id="b"></div>
</div>

JS :

a.compareDocumentPosition(b);

在Chrome试试这个例子，结果是 20。这里的 20 表示什么呢？下面先看一些常见的返回值：

　　33 => 100001

　　20 => 010100

　　16 => 010000

　　10 => 001010

　　 8 => 001000

　　4 => 000100

　　2 => 000010

　　 1 => 000001

　　0 => 000000

很明显，例子的结果是第2个。要说明20的意义，需要先分析右边的二进制数。

这个二进制数分6位，从左到右依次是（如果符合条件，该位为1，否则为0）：

　　第1位：浏览器的私有使用

　　第2位：a是b的父节点

　　第3位：a是b的子节点

　　第4位：a是b前面的节点

　　第5位：a是b后面的节点

　　第6位：a和b在不同的文档（或者一个在文档之外）

说到这里，20的意思就明显了，即 a是b的父节点，同时 a是b前面的节点。其实通常用到的是第2-5位，我觉得这四位已经足够表示任何位置关系了，也许你会问，a等于b 的情况怎么表示呢？

逆向思维一下，如果这四位都是0，也就是说，既不是父节点，又不是子节点，既不在前面，又不在后面，那唯一的解释就是a 等于 b，答案就是 000000。

上面说的都是比较正常的情况，变态的情况是，其中有一个元素没有加入DOM树，或者更极端的，a和b都没有加入DOM树，这里我仅举一例，总之是差异非常大，谁试谁知道。

var a = document.getElementById('a'), 
    b = document.createElement('div');
alert(a.compareDocumentPosition(b));

Chrome: 33 => 100001

Firefox: 37 => 100101

Safari: 33 => 100001

Opera: 35 => 100011

其他的n种情况我就不一一举例了，总之就是各浏览器的实现很不一致。

暂时先写到这里吧！

转载于:https://www.cnblogs.com/zhujl/archive/2012/03/08/2384514.html

关注