如果元素存在于DOM中或者它是虚拟的（仅由createElement创建），如何使用javascript查找

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有：可见选择器，但当我需要找到隐藏元素放在文档中的某个位置时，它不会给出准确的结果。

Answer 1

这是一个更简单的方法，它使用标准的Node.contains DOM API来检入当前在DOM中的元素：

document.body.contains(MY_ElEMENT);

CROSS-BROWSER注意 ：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的节点的存在。 您有0保证ownerDocument是您要检查的同一文档 - 只有您知道。 ownerDocument的危险在于有人可能会引入任意数量的方法来引用，导入或生成驻留在其他文档中的节点。 如果他们这样做，并且您编写了代码以依赖ownerDocument的相对推理，那么您的代码可能会中断。 为确保代码始终产生预期结果，您应该只与要检查的特定引用 document进行比较，而不是信任像ownerDocument这样的相对推理。

Answer 2

做这个：

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

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

Answer 3

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

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));

Answer 4

你也可以使用jQuery.contains ：

jQuery.contains( document, YOUR_ELEMENT)

Answer 5

使用compareDocumentPosition查看元素是否包含在document 。 PPK具有浏览器兼容性细节， John Resig有IE版本。

Answer 6

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