JS中通用的contains方法判断两个节点的关系

最新推荐文章于 2022-03-25 20:23:49 发布

原创最新推荐文章于 2022-03-25 20:23:49 发布 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了三种检测一个DOM节点是否是另一个节点的后代的方法：通过contains()方法、compareDocumentPosition()方法以及通过遍历DOM树的方式。这些方法适用于不同的浏览器环境。

“我生本无乡,心安是归处”

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;
    }
}

这个函数组合使用了三种方式来确定一个节点是不是另一个节点的后代。函数的第一个参数是参考节点，第二个参数是要检查的节点。在函数体内，首先检测 refNode 中是否存在 contains() 方法（能力检测）。这一部分代码还检查了当前浏览器所用的 WebKit 版本号。如果方法存在而且不是 WebKit（ !client.engine.webkit ），则继续执行代码。否则，如果浏览器是 WebKit 且至少是 Safari 3（WebKit版本号为 522 或更高），那么也可以继续执行代码。在 WebKit 版本号小于 522 的 Safari 浏览器中，contains() 方法不能正常使用。
接下来检查是否存在 compareDocumentPosition() 方法，而函数的最后一步则是自 otherNode开始向上遍历 DOM 结构，以递归方式取得 parentNode ，并检查其是否与 refNode 相等。在文档树的顶端， parentNode 的值等于 null ，于是循环结束。这是针对旧版本 Safari 设计的一个后备策略