Node.contain函数兼容处理的方法是什么

本文小编为大家详细介绍“Node.contain函数兼容处理的方法是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“Node.contain函数兼容处理的方法是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

contains方法

Node 接口的 contains()  方法返回一个布尔值，表示一个节点是否是给定节点的后代，即该节点本身、其直接子节点（childNodes）、子节点的直接子节点等。

参数

otherNode

要测试的节点。

备注：  otherNode 不是可选的，但是可以设置为 null。

返回值

返回一个布尔值，如果 otherNode 包含在节点中会返回 true，否则返回 false。

如果 otherNode 参数为 null，则 contains() 始终返回 false。

示例

下面的函数用来检查一个元素是否是 body 元素的后代元素。由于 contains 会包含元素自身，而确定 body 是否包含自身不是设计 isInPage 的意图，这种情况明确返回 false。

function isInPage(node) {
  return (node === document.body) ? false : document.body.contains(node);
}

规范

Specification
DOM Standard # ref-for-dom-node-contains①

浏览器兼容性

Report problems with this compatibility data on GitHub

	desktop	mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android
contains	16Toggle history	12Toggle history	9Toggle history	7Toggle history	1.1Toggle history	18Toggle history	9Toggle history	10.1Toggle history	1Toggle history	1.0Toggle history	4.4Toggle history

兼容处理

因为是原生方法，兼容性有限，所以针对公司的项目兼容需求，还需要进行兼容处理。具体代码如下：

const contains = (root, el) => {
    if (root.compareDocumentPosition) return root === el || !!(root.compareDocumentPosition(el) & 16);
    if (root.contains && el.nodeType === 1) {
        return root.contains(el) && root !== el;
    }
    while ((el = el.parentNode)) if (el === root) return true;
    return false;
};

这段代码实现了一个检测节点是否存在于指定容器中的函数contains，其中使用了三种不同的方式进行判断：

• 如果浏览器支持compareDocumentPosition方法，则直接使用该方法进行判断。首先判断root节点是否等于el节点，如果是，则返回true；否则，使用compareDocumentPosition方法判断el节点是否在root节点中，如果结果为16，则返回true，否则返回false。

• 如果浏览器不支持compareDocumentPosition方法，但支持contains方法，则判断el节点是否是一个元素节点（nodeType为1），如果是，则使用contains方法判断el节点是否在root节点中，并且root节点不等于el节点，如果满足，则返回true，否则返回false。

• 如果浏览器既不支持compareDocumentPosition方法，也不支持contains方法，则使用while循环遍历el节点的所有祖先节点，判断是否有节点等于root节点，如果有，则返回true，否则返回false。

综合三种方式，可以实现在各种浏览器中兼容检测节点是否存在于指定容器中的功能。

读到这里，这篇“Node.contain函数兼容处理的方法是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程之家行业资讯频道。