标签：
JS开发人员经常都需要确定某个节点是否包含另一个节点，由此IE率先引入了contains()函数，随后，Safari3及其更高版本，Opera 8及其更高版本，Chrome都支持了这个方法（Safari 2.x中虽然也支持这个方法，但无法正常使用）。FireFox不支持这个方法，但在DOM3中提供了一个替代方法compareDocuemntPosition()。由于此种原因，要想跨平台确定某个节点是否包含另一个节点，就必须提供一个通用的contains()函数来解决这种差异，通常的解法方法如下：
var Contains = function(a, b){ return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16); }
以上代码中，通过三目运算符确定浏览器是否支持contains()方法，如果支持该方法，则对a != b && a.contains(b)进行判断，并返回一个布林值，否则对
!!(a.compareDocumentPosition(b) & 16)进行判断，我的疑惑正在于此，我们知道，逻辑非操作符由一个叹号(!)表示，可以用于ECMAscript中的任何值，无论这个值是什么数据类型，这个操作符都会返回一个布尔值。同时使用两个逻辑非(!)操作符，就会模拟Boolean()转型函数的行为，于是就得到了这个值真正对应的布尔值。也就是说实际判断的是a.compareDocumentPosition(b) & 16。在使用compareDocumentPosiotn()方法时会返回一个表示该关系的位掩码，下表列出了这个位掩码的可能值：
| 掩码 | 节点关系 |
| 1 | 无关（给定的节点不在当前文档中） |
| 2 | 居前（给点的节点在DOM树种位于给点的节点之前） |
| 4 | 居后（给点的节点在DOM树种位于给点的节点之后） |
| 8 | 包含（给定的节点是参考节点的祖先） |
| 16 | 被包含（给定的节点是参考节点的后代） |
为模仿contanins()，应该关注的是16。如果a.compareDocumentPosition(b)得出的值是1,2,4,8,16，那么!!(1&16),!!(2&16),!!(4&16)... ...怎么确认呢？讲到这里我们必须注意”&“操作符，它叫作”按位与“，从本质上讲，按位与就是将两个数值的每一位对齐，然后根据下表中的规则，对相同位置上的两个数进行操作：
| 第一个数值的位 | 第二个数值的位 | 结果 |
| 1 | 1 | 1 |
| 1 | 0 | 0 |
| 0 | 1 | 0 |
| 0 | 0 | 0 |
以16&16为例，先将16转换为二进制数，16=0000 0000 0000 0000 0000 0000 0001 0000，那么16&16=0000 0000 0000 0000 0000 0000 0001 0000（具体操作过程可参考位操作符的原则），那么!!(16&16)=true（对于其它几个掩码，大家不妨也试一下，其与16进行按位与操作的结果都是0）。因此通过以上方法，便能通过!!(a.compareDocumentPosition(b) & 16)模拟出a.contanins(b)。
在学习“contains()和compareDocumentPositon()"过程中遇到的一点疑惑！
标签：
原文地址：http://www.cnblogs.com/1800hk/p/5218237.html
