跨浏览器检测某个节点是不是另一个节点的后代
1.通常我们使用contains()方法不通过在DOM文档树中查找即可获得这个消息,传入两个参数,一个是祖先节点另一个是需要检测的后台节点。
2.通过compareDocumentPosition()确定节点之间的关系,返回一个表示该关系的位掩码。
掩码 | 节点关系 |
1 | 无关(给定的节点不在当前文档中) |
2 | 居前(给定的节点在DOM树中) |
4 | 居后(给定的节点在DOM树中位于参考节点之后) |
8 | 包含(给定的节点是参考节点的祖先) |
16 | 被包含(给定节点是参考节点的后代) |
function contains(refNode,otherNode){ if( typeof refNode.contains == "function" && (!client.engine.webkit || client.engine.webkit >= 522)){ return refNode.contains(otherNode); } else if (typeof refNode.compareDocumentPosition == "function"){ return !!(refNode.compareDocumentPosition(otherNode) & 16) } else { var node = otherNode.parentNode do{ if(node === refNode){ return true }else{ node = node.parentNode } }while(node !== null); return false } } function getContains(){ alert(contains(document.documentElement,document.body)) }
这个函数使用了三种方式来检测。函数的第一个参数是参考节点,第二个参数是检查节点。在函数体内,首先检测refNode中是否存在contains()方法(能力检测)。这一部分代码还检查了当前浏览器所用的Webkit版本号。如果方法存在而且不是Webkit
(!client.engine.webkit),则需要继续执行代码。如果浏览器是webkit且至少是Safari3(WebKit版本号为522或者更高,那么可以继续执行代码),在Webkit版本号小于522的Safari浏览器中,contains()方法不能正常使用。