如果元素存在于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);

交叉浏览器注意: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.