如何使用JavaScript查找元素是否存在于DOM中或者是虚拟的（刚刚通过createElement创建）？

Question

我是一名有用的助手，以下是您需要翻译的内容：

我希望找到一种方法来判断JavaScript中引用的元素是否已被插入文档中。

让我们用以下代码来说明一个情况：

var elem = document.createElement('div');

// Element has not been inserted in the document, i.e. not present

document.getElementByTagName('body')[0].appendChild(elem);

// Element can now be found in the DOM tree

Jquery有一个:visible选择器，但当我需要查找放置在文档中某个不可见元素时，它不能给出准确的结果。

- mpontus

Answer 1

这里有一种更简单的方法，使用标准Node.contains DOM API来检查一个元素是否当前存在于DOM中：

document.body.contains(MY_ElEMENT);

跨浏览器注意事项：IE中的文档对象没有contains()方法。为了确保跨浏览器兼容性，请使用document.body.contains()方法（如果您要检查像链接、脚本等元素，则使用document.head.contains()方法）。

 

---

 

使用特定的document引用与节点级ownerDocument的注意事项：

有人提出使用MY_ELEMENT.ownerDocument.contains(MY_ELEMENT)来检查节点是否存在于文档中。虽然这个方法可以产生预期的结果（虽然在99%的情况下比必要的复杂），但它也可能导致意想不到的结果，具体取决于使用情况。让我们谈谈其中的原因：

如果您正在处理当前位于单独文档中的节点，例如使用document.implementation.createHTMLDocument()生成的节点、一个<iframe>文档或HTML导入文档，并且使用节点的ownerDocument属性来检查节点是否存在于您认为会是主要的可视化呈现的document中，那么您将面临麻烦。

节点属性ownerDocument只是指向节点所在的任何当前文档的指针。几乎每个contains的用例都涉及检查一个特定的document是否存在节点。您无法保证ownerDocument是您想要检查的相同文档，只有您知道。使用ownerDocument的危险在于，某人可能引入任意数量的方法来引用、导入或生成驻留在其他文档中的节点。如果他们这样做了，并且您编写的代码依赖于ownerDocument的相关推断，则您的代码可能会出错。为确保您的代码始终产生预期的结果，您应该仅与您打算检查的具体引用document进行比较，而不是信任类似于ownerDocument的相对推断。

- csuwldcat

---

评论不适合进行长时间的讨论；此对话已被移至聊天室。 - Taryn

Answer 2

执行以下操作：

var elem = document.createElement('div');
elem.setAttribute('id', 'my_new_div');

if (document.getElementById('my_new_div')) { } //element exists in the document.

- Dexter

---

谢谢，伙计。我一直在想这个问题，但是担心可能会出现ID冲突的情况。刚才我通过检查元素的父变量开发了一种新方法。虽然这并不是绝对的新方法，但我很惊讶自己以前没有想到过。 - mpontus

Answer 3

你还可以使用 jQuery.contains：

jQuery.contains( document, YOUR_ELEMENT)

- nitinkhuranas

Answer 4

最安全的方法是直接测试元素是否包含在文档中：

function isInDocument(el) {
    var html = document.body.parentNode;
    while (el) {
        if (el === html) {
            return true;
        }
        el = el.parentNode;
    }
    return false;
}

var elem = document.createElement('div');
alert(isInDocument(elem));
document.body.appendChild(elem);
alert(isInDocument(elem));

- Tim Down

Answer 5

function isInDocument(query){
  return document.querySelectorAll(query).length != 0;
}
// isInDocument("#elemid") 

- Sahan

---

这个问题在7年前已经得到了回答。也许您想详细说明一下您的答案如何比最初回答时更准确？不要只是发布一些没有详细说明的代码，请参见https://stackoverflow.com/help/how-to-answer。 - crackmigg

Answer 6

使用 compareDocumentPosition 来查看元素是否包含在 document 中。PPK 提供了浏览器兼容性的详细信息，而 John Resig 则提供了 IE 版本。

- Jeffery To

---

我也曾想过使用compareDocumentPosition，但是在所有浏览器中使其正常工作的折腾似乎并不值得，当你可以像我的答案一样简单地沿着节点树向上遍历时，这种方法几乎可以在所有浏览器中运行。 - Tim Down