跨浏览器检测某个节点是不是另一个节点的后代

Posted 2020-09-26

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()方法不能正常使用。