likes
comments
collection
share

Node.contains 函数兼容处理

作者站长头像
站长
· 阅读数 19

生活不止眼前的苟且,还有诗和远方

掘友们,大家好我是前端奶爸,入行5年的前端小学生🥜~ 工作八小时摸鱼四小时,喜欢跑步但不是为了让自己更瘦,而是为了让自己活得更久~ 活到九十九,卷到九十九~

前言

好久不写文章了,都不知道跟大家怎么打招呼了,新的一年开始,也应该收心,做一些文字的记录以及分享了。

先说下写这篇文章的由来吧,接到一个需求需要在项目中实现一个效果,就是点击其他区域隐藏dom的操作,试了很多的方式,感觉都不是特别合理,所以针对当前需求做了一个方法的实现,使用dom原生方法 contains进行判断当前点击的元素是否是指定父级的子级,然后进行判断是否隐藏指定元素。

具体业务逻辑方法就不在这里赘述了,主要讲下contains方法。

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,其中使用了三种不同的方式进行判断:

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

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

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

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

总结

方法整体的实现难度不是很大,就是针对当前原生方法的不支持的内容进行补充,如果有用到或者有幸刷到奶爸文章的同学,动动发财的小手点个赞~~

疫情已结束,春暖花开,JYM,开始搞钱~~~