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

栏目分类：其他教程    发布日期：2023-10-30    浏览次数：235次     收藏

本文小编为大家详细介绍“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

  。

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