前言

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

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

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

contains方法

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

參數(shù)

otherNode

要測試的節(jié)點。

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

返回值

返回一個布爾值，如果 otherNode 包含在節(jié)點中會返回 true，否則返回 false。

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

示例

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

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

規(guī)范

瀏覽器兼容性

Report problems with this compatibility data on GitHub

兼容處理

因為是原生方法，兼容性有限，所以針對公司的項目兼容需求，還需要進(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;
};

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

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

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

總結(jié)

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

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

最新評論