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

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

来自 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;
    }
}