compareDocumentPosition与contains

研究KISSY 1.3RC源代码DOM/traversal 发现这样一段代码

        __contains =
            documentElement.compareDocumentPosition ?
                function (a, b) {
                    return !!(a.compareDocumentPosition(b) & 16);
                } :
                documentElement.contains ?
                    function (a, b) {
                        if (a.nodeType == NodeType.DOCUMENT_NODE) {
                            a = a.documentElement;
                        }
                        // !a.contains => a===document || text
                        // 注意原生 contains 判断时 a===b 也返回 true
                        b = b.parentNode;

                        if (a == b) {
                            return true;
                        }

                        // when b is document, a.contains(b) 不支持的接口 in ie
                        if (b && b.nodeType == NodeType.ELEMENT_NODE) {
                            return a.contains && a.contains(b);
                        } else {
                            return false;
                        }
                    } : 0;

这段代码的作用是判断一个节点是另一个节点的父节点。代码中主要用到了compareDocumentPosition与contains两个方法。
下面认识一下这两个方法。
contains是IE发明的函数，后来也有别的浏览器支持，比如Chrome，opera，有资料说firefox不支持此方法，但我用firefox15测试发现已经支持此方法。用法如下：
el.contains(el2);
如果 el包含el2 或 el === el2，返回true；否则返回false。

这很简单，接着说compareDocumentPosition。
这个函数来自DOM Level 3 规范，标准浏览器都支持，但IE6-8不支持，IE从9开始支持。这个函数的返回值有点难理解，下面细说：

<div id="a">
    <div id="b"></div>
</div>
<script type="text/javascript">
   alert(a.compareDocumentPosition(b));
</script>

在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。

知道了这些再来看代码 return !!(a.compareDocumentPosition(b) & 16);
为什么要&16？ 我们知道16的2进制为10000 ，我们发现之后与左数第五位为1的数做&运算才会得到非零数，对非零做两次!操作就获得了一个布尔值。那么谜底解开了，这句的作用就是判断一个节点是否是另一个节点的祖先节点。
继续分析代码：

                        if (a.nodeType == NodeType.DOCUMENT_NODE) {
                            a = a.documentElement;
                        }
                        // !a.contains => a===document || text
 

这段代码考虑到了一种情况，就是当第一个参数是document的情况，document本身不是一个节点，所以contains方法无法对其进行比较，但是在逻辑上我们可以把document当成是最外层节点来处理，似乎更加合理。

                       // 注意原生 contains 判断时 a===b 也返回 true
                        b = b.parentNode;

                        if (a == b) {
                            return true;
                        }

contrains方法判断a与b对象的关系式还会将a 等于 b这种情况也返回true。上面这段代码将这种情况做了特殊处理。
最后一段代码就是使用contains方法来判断a与b的关系。

*注：在比较节点时有一种特殊情况，就是两个节点其中一个或两个还没有被放入DOM树中，这种情况下的比较结果结果在个浏览器中表现不一致，请使用者注意。
参考：
【1】http://www.cnblogs.com/zhujl/archive/2012/03/08/2384514.html
【2】http://www.codesky.net/article/201111/116405.html
END