Node.contain函數(shù)兼容處理的方法是什么

本文小編為大家詳細(xì)介紹“Node.contain函數(shù)兼容處理的方法是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Node.contain函數(shù)兼容處理的方法是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

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ī)范

瀏覽器兼容性

Report problems with this compatibility data on GitHub

兼容處理

因?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。

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

讀到這里，這篇“Node.contain函數(shù)兼容處理的方法是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。