前言

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

先說下寫這篇文章的由來吧，接到一個(gè)需求需要在項(xiàng)目中實(shí)現(xiàn)一個(gè)效果，就是點(diǎn)擊其他區(qū)域隱藏dom的操作，試了很多的方式，感覺都不是特別合理，所以針對當(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

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

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

返回值

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

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

示例

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

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

規(guī)范

瀏覽器兼容性

Report problems with this compatibility data on GitHub

兼容處理

因?yàn)槭窃椒?，兼容性有限，所以針對公司的?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è)檢測節(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。

綜合三種方式，可以實(shí)現(xiàn)在各種瀏覽器中兼容檢測節(jié)點(diǎn)是否存在于指定容器中的功能。

總結(jié)

方法整體的實(shí)現(xiàn)難度不是很大，就是針對當(dāng)前原生方法的不支持的內(nèi)容進(jìn)行補(bǔ)充，

以上就是一文詳解Node.contain 函數(shù)兼容處理的詳細(xì)內(nèi)容，更多關(guān)于Node.contain 函數(shù)兼容的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論