Node.contain函數兼容處理的方法是什么

本文小編為大家詳細介紹“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);
}

規范

瀏覽器兼容性

Report problems with this compatibility data on GitHub

兼容處理

因為是原生方法，兼容性有限，所以針對公司的項目兼容需求，還需要進行兼容處理。具體代碼如下：

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。

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

讀到這里，這篇“Node.contain函數兼容處理的方法是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。