Question

var myElement = document.querySelector('div.example');// <div..></div>
/*
 * A lot time after, codes executed, whatever
 */
if( myElement.isInDocument )
{
     // Do something
}

是否有一种简单的方法可以知道'myElement'是否仍在文档中？

Answer 1

由于文档中的每个元素都是文档的子元素，因此请检查您的元素是否为：

function isInDocument(e) {
    while( e.parentNode) e = e.parentNode;
    return e === document;
}

Answer 2

From Mozilla：

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

Answer 3

一种方法是使用contains()

var myElement = document.querySelector('div.example');
console.log("elment ", myElement);
console.log("contains before ", document.body.contains(myElement));
myElement.parentNode.removeChild(myElement);
console.log("contains after ", document.body.contains(myElement));

JSFiddle

Answer 4

您可以先查看.contains()方法是否存在，并在可用时使用它。如果没有，请走父链寻找文档对象。从之前的项目使用这样的代码，你不能只是依赖于parentNode为空（在某些版本的IE中），当你到达文档时，你必须明确地检查这样的文档：

function isInDocument(e) {
    if (document.contains) {
        return document.contains(e);
    } else {
        while (e.parentNode && e !== document) {
            e = e.parentNode;
        }
        return e === document;
    }
}

我可以知道元素是否在文档中？

4 个答案: