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 回答