如何使用javascript查找元素是否存在于DOM中或是否为虚拟元素(刚刚由createElement创建) [英] How to find with javascript if element exists in DOM or it's virtual (has been just created by createElement)

问题描述

我正在寻找一种方法来确定javascript中引用的元素是否已插入文档中.

I'm looking for a way to find if element referenced in javascript has been inserted in the document.

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

Lets illustrate a case with following code:

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

Jquery has :visible selector, but it won't give accurate result when I need to find that invisible element has been placed somewhere in the document.

推荐答案

这是使用标准

Here's an easier method that uses the standard Node.contains DOM API to check in an element is currently in the DOM:

document.body.contains(MY_ElEMENT);

跨浏览器注意:IE中的文档对象没有contains()方法-为确保跨浏览器的兼容性，请改用document.body.contains(). (或document.head.包含是否要检查链接，脚本等元素)

CROSS-BROWSER NOTE: the document object in IE does not have a contains() method - to ensure cross-browser compatibility, use document.body.contains() instead. (or document.head.contains if you're checking for elements like link, script, etc)

 

 

关于使用特定document参考与节点级ownerDocument的说明:

Notes on using a specific document reference vs Node-level ownerDocument:

有人提出了使用MY_ELEMENT.ownerDocument.contains(MY_ELEMENT)检查文档中是否存在节点的想法.尽管此 可以产生预期的结果(尽管在99％的情况下比所需的冗长程度更高)，但根据用例的不同，它也可能导致意想不到的结果.让我们说说为什么:

Someone raised the idea of using MY_ELEMENT.ownerDocument.contains(MY_ELEMENT) to check for a node's presence in the document. While this can produce the intended result (albeit, with more verbosity than necessary in 99% of cases), it can also lead to unexpected results, depending on use-case. Let's talk about why:

如果要处理当前驻留在单独文档中的节点(例如使用document.implementation.createHTMLDocument()，<iframe>文档或HTML导入文档生成的文档)，请使用节点的ownerDocument属性检查是否存在在您认为的东西中，您将成为视觉上呈现的主要document，您将处于一个受伤的世界.

If you are dealing with a node that currently resides in an separate document, like one generated with document.implementation.createHTMLDocument(), an <iframe> document, or an HTML Import document, and use the node's ownerDocument property to check for presence in what you think will be your main, visually rendered document, you will be in a world of hurt.

节点属性ownerDocument只是指向节点所在的任何当前文档的指针.contains的几乎每个用例都涉及检查特定的 document表示节点的存在.您有0个保证ownerDocument是您要检查的同一文档-只有您知道这一点. ownerDocument的危险在于，有人可能会引入许多方式来引用，导入或生成驻留在其他文档中的节点.如果这样做，并且您已编写代码以依赖ownerDocument的相对推断，则代码可能会中断.为了确保您的代码始终能产生预期的结果，您应该只与要检查的专门引用的 document进行比较，而不要信任像ownerDocument这样的相对推断.

The node property ownerDocument is simply a pointer to whatever current document the node resides in. Almost every use-case of contains involves checking a specific document for a node's presence. You have 0 guarantee that ownerDocument is the same document you want to check - only you know that. The danger of ownerDocument is that someone may introduce any number of ways to reference, import, or generate nodes that reside in other documents. If they do so, and you have written your code to rely on ownerDocument's relative inference, your code may break. To ensure your code always produces expected results, you should only compare against the specifically referenced document you intend to check, not trust relative inferences like ownerDocument.

这篇关于如何使用javascript查找元素是否存在于DOM中或是否为虚拟元素(刚刚由createElement创建)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！