8

我正在寻找一种方法来查找 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 选择器，但是当我需要发现不可见元素已放置在文档中的某个位置时，它不会给出准确的结果。

4

6 回答 6

15

这是一个更简单的方法，它使用标准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，你会在一个受伤的世界里。

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

于 2013-05-29T17:14:19.540 回答
14

做这个：

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

if (document.getElementById('my_new_div')) { } //element exists in the document.
于 2010-04-27T05:57:20.613 回答
1

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

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));
于 2010-04-27T08:43:30.520 回答
1

您还可以使用jQuery.contains：

jQuery.contains( document, YOUR_ELEMENT)
于 2017-08-09T06:14:52.000 回答
-1

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

于 2010-04-27T09:56:03.620 回答
-1 
function isInDocument(query){
  return document.querySelectorAll(query).length != 0;
}
// isInDocument("#elemid")
于 2017-09-23T06:19:16.520 回答