快捷導(dǎo)航

一文詳解Node.contain?函數(shù)兼容處理

更新時(shí)間：2023年03月08日 11:04:40 作者：前端奶爸

這篇文章主要為大家介紹了Node.contain?函數(shù)兼容處理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

好久不寫(xiě)文章了，都不知道跟大家怎么打招呼了，新的一年開(kāi)始，也應(yīng)該收心，做一些文字的記錄以及分享了。

先說(shuō)下寫(xiě)這篇文章的由來(lái)吧，接到一個(gè)需求需要在項(xiàng)目中實(shí)現(xiàn)一個(gè)效果，就是點(diǎn)擊其他區(qū)域隱藏dom的操作，試了很多的方式，感覺(jué)都不是特別合理，所以針對(duì)當(dāng)前需求做了一個(gè)方法的實(shí)現(xiàn)，使用dom原生方法 contains進(jìn)行判斷當(dāng)前點(diǎn)擊的元素是否是指定父級(jí)的子級(jí)，然后進(jìn)行判斷是否隱藏指定元素。

具體業(yè)務(wù)邏輯方法就不在這里贅述了，主要講下contains方法。

contains方法

Node 接口的 contains() 方法返回一個(gè)布爾值，表示一個(gè)節(jié)點(diǎn)是否是給定節(jié)點(diǎn)的后代，即該節(jié)點(diǎn)本身、其直接子節(jié)點(diǎn)（childNodes）、子節(jié)點(diǎn)的直接子節(jié)點(diǎn)等。

參數(shù)

otherNode

要測(cè)試的節(jié)點(diǎn)。

備注： otherNode 不是可選的，但是可以設(shè)置為 null。

返回值

返回一個(gè)布爾值，如果 otherNode 包含在節(jié)點(diǎn)中會(huì)返回 true，否則返回 false。

如果 otherNode 參數(shù)為 null，則 contains() 始終返回 false。

示例

下面的函數(shù)用來(lái)檢查一個(gè)元素是否是 body 元素的后代元素。由于 contains 會(huì)包含元素自身，而確定 body 是否包含自身不是設(shè)計(jì) isInPage 的意圖，這種情況明確返回 false。

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

規(guī)范

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

兼容處理

因?yàn)槭窃椒?，兼容性有限，所以針?duì)公司的項(xiàng)目兼容需求，還需要進(jìn)行兼容處理。具體代碼如下：

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

這段代碼實(shí)現(xiàn)了一個(gè)檢測(cè)節(jié)點(diǎn)是否存在于指定容器中的函數(shù)contains，其中使用了三種不同的方式進(jìn)行判斷：

如果瀏覽器支持compareDocumentPosition方法，則直接使用該方法進(jìn)行判斷。首先判斷root節(jié)點(diǎn)是否等于el節(jié)點(diǎn)，如果是，則返回true；否則，使用compareDocumentPosition方法判斷el節(jié)點(diǎn)是否在root節(jié)點(diǎn)中，如果結(jié)果為16，則返回true，否則返回false。
如果瀏覽器不支持compareDocumentPosition方法，但支持contains方法，則判斷el節(jié)點(diǎn)是否是一個(gè)元素節(jié)點(diǎn)（nodeType為1），如果是，則使用contains方法判斷el節(jié)點(diǎn)是否在root節(jié)點(diǎn)中，并且root節(jié)點(diǎn)不等于el節(jié)點(diǎn)，如果滿足，則返回true，否則返回false。
如果瀏覽器既不支持compareDocumentPosition方法，也不支持contains方法，則使用while循環(huán)遍歷el節(jié)點(diǎn)的所有祖先節(jié)點(diǎn)，判斷是否有節(jié)點(diǎn)等于root節(jié)點(diǎn)，如果有，則返回true，否則返回false。