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

开发技术 作者:iii 2024-04-24 19:15:02
本文小编为大家详细介绍“Node.contain函数兼容处理的方法是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“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


desktopmobile









ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung InternetWebView Android
contains16Toggle history12Toggle history9Toggle history7Toggle history1.1Toggle history18Toggle history9Toggle history10.1Toggle history1Toggle history1.0Toggle history4.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函数兼容处理的方法是什么”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注捷杰建站行业资讯频道。

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_17117.html