contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
ps：这两天在看Cloudgamer的js工具库 cloudgamer Js Library v0.1 ,里面有一个dom的contain方法，如下：
var D={
contains: document.defaultView//参见 JS从样式表取值的函数currentStyle(IE),defaultView(FF)
? function (a, b) { return !!( a.compareDocumentPosition(b) & 16 ); }
: function (a, b) { return a != b && a.contains(b); }
}
我对compareDocumentPosition这个函数实在是陌生，见都没有见过，就上网找了一下，还真不错，找到了，扩展知识，做个记录吧……
1、DOMElement.contains(DOMNode)
这个方法起先用在 IE ，用来确定 DOM Node 是否包含在另一个 DOM Element 中。
当尝试优化 CSS 选择器遍历（像：“#id1 #id2”），这个方法很有用。你可以通过 getElementById 得到元素，然后使用 .contains() 确定 #id1 实际上是否包含 #id2。
注意：如果 DOMNode 和 DOMElement 相一致，.contains() 将返回 true ，虽然，一个元素不能包含自己。
2、NodeA.compareDocumentPosition(NodeB)
这个方法是 DOM Level 3 specification 的一部分，允许你确定 2 个 DOM Node 之间的相互位置。这个方法比 .contains() 强大。这个方法的一个可能应用是排序 DOM Node 成一个详细精确的顺序。
使用这个方法你可以确定关于一个元素位置的一连串的信息。所有的这些信息将返回一个比特码（Bit，比特，亦称二进制位）。
对于那些，人们知之甚少。比特码是将多重数据存储为一个简单的数字（译者注：0 或 1）。你最终打开 / 关闭个别数目（译者注：打开/关闭对应 0 /1），将给你一个最终的结果。
这里是从 NodeA.compareDocumentPosition(NodeB) 返回的结果，包含你可以得到的信息。
Bits Number Meaning
000000 0 元素一致
000001 1 节点在不同的文档（或者一个在文档之外）
000010 2 节点 B 在节点 A 之前
000100 4 节点 A 在节点 B 之前
001000 8 节点 B 包含节点 A
010000 16 节点 A 包含节点 B
100000 32 浏览器的私有使用
这个表格的意思如下：
<div id="a"><div id="b"></div></div>
<script>
alert( document.getElementById("a").compareDocumentPosition(document.getElementById("b")) == 20);
</script>
满足a在b之前，而且a包含b，则返回结果就是4+16=20，则cloudgamer的js工具代码就很好理解了，加入支持defaultView的话，那肯定不支持contain方法，那么就使用compareDocumentPosition与16作位与操作只要大于等于16，结果肯定不是0啦；否则就使用ie的contain方法来进行判断就ok
更多相关文章
- 利用javascript动态加载头部出现点击事件与hover事件无效解决方
- 类似jQuery的extend扩展方法的实现
- 如何在onchange（）事件后调用的方法中将焦点设置为输入字段？
- jsPDF中使用.text（）方法的字母间距
- javascript 截取字符串方法汇总
- 关于JavaScript方法，设置GridView中首项CheckBox勾选，整列全部勾选
- javascript的密封对象之seal(),isSealed()方法
- js之DOM操作（访问父节点parentNode）
- 1. 总是从ID选择器开始继承 在jquery中最快的选择器是ID选择