Contains
各个类库基本都有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种情况我就不一一举例了,总之就是各浏览器的实现很不一致。
暂时先写到这里吧!