检查节点是否存在于 Javascript 中
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5377340/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Checking if node exists in Javascript
提问by HughieW
Here's the deal - I've got a load of elements on a page, and I'm using Javascript to remove some of them (this.parentNode.removeChild(this)) which is working great. However, if I have a variable referring to this node, then remove the node, the variable does NOT lose it's value! But if I then try and perform some other actions on this element, I get errors!
这是交易 - 我在页面上加载了大量元素,我正在使用 Javascript 删除其中的一些元素 (this.parentNode.removeChild(this)),效果很好。但是,如果我有一个引用此节点的变量,则删除该节点,该变量不会丢失其值!但是,如果我随后尝试对该元素执行一些其他操作,则会出现错误!
Example:
例子:
var element = document.getElementById('ooolookatmeimanelement');
element.parentNode.removeChild(element);
alert(element);
I still get "[Object HTMLblahblahblah]" in the alert, rather than null or undefined - anyone got any ideas how I can check to see if the node has been removed? It's probably something really simple that I'm oblivious to!
我仍然在警报中收到“[Object HTMLblahblahblah]”,而不是 null 或 undefined - 任何人都知道如何检查节点是否已被删除?这可能是我忘记的非常简单的事情!
回答by Felix Kling
If you remove the node, remove the references too. E.g. in your code, assign null
to element
:
如果删除节点,也删除引用。例如,在您的代码中,分配null
给element
:
element = null;
Or if this is not possible, you can always check the value of parentNode
. It should give null
if the element is not part of the DOM:
或者,如果这是不可能的,您可以随时检查 的值parentNode
。null
如果元素不是 DOM 的一部分,它应该给出:
if(element.parentNode === null) {
// element is not part of the DOM
}
But this does not make much sense to me (might depend on the context though): If you removed an element, then you knowthat you have removed it. Why would you do any further operations on it?
但这对我来说没有多大意义(尽管可能取决于上下文):如果您删除了一个元素,那么您就知道您已经删除了它。你为什么要对它做进一步的操作?
回答by Kamafeather
You can also use document.body.contains(element)
; or $.contains(body, element)
.
你也可以使用document.body.contains(element)
; 或$.contains(body, element)
。
Checking for the parentNode
is not reliable; if what is removed is an ancestor of the element, instead of the element itself, then parentNode
will still return the parent, while the element is not in the DOM anymore.
检查parentNode
不可靠;如果移除的是元素的祖先,而不是元素本身,那么parentNode
仍然会返回父元素,而元素不再在 DOM 中。
var ancestor = document.querySelector('div');
var ghost = document.querySelector('br');
ancestor.parentNode.removeChild(ancestor);
console.log(ghost.id + ' son of ' + ghost.parentNode.id);
console.log(ghost.id + (document.body.contains(ghost) || ' dont') + ' exists in DOM');
<div id="ancestorToRemove">
<p id="a bitch">
<br id="you">
</p>
</div>
回答by Alnitak
.removeChild()
only removes the element from the DOM, and not from memory.
.removeChild()
只从 DOM 中删除元素,而不是从内存中删除。
Hence it still exists until it's garbage collected. However you're holding a reference to it, so that won't happen.
因此它仍然存在,直到它被垃圾收集。但是,您持有对它的引用,因此不会发生这种情况。
回答by Sabin
Another point that may save time if you're needing to run JavaScript triggered by onClick
which does something to itself, you can do this:
如果您需要运行由onClick
它触发的 JavaScript对自身执行某些操作,则可以节省时间的另一点是,您可以这样做:
onClick="if(!document.getElementById(this.id))return false; YOUR CODE HERE"
For me, this came up when I had a DIV
with several children, one of which was a "remove this div" button (actually a DIV
made to look like a button). When clicked, this 'button' would remove the DIV
from the DOM, as expected, but then would call the onClick event of the DIV
itself (which no longer exists). This caused problems. By adding this to my DIV
's onClick
, I prevented running the code which refers to the DIV
after its removal.
对我来说,当我有DIV
几个孩子时出现了这个问题,其中一个是“删除这个 div”按钮(实际上是一个DIV
看起来像一个按钮的按钮)。当点击时,这个“按钮”会DIV
像预期的那样从 DOM 中删除,但随后会调用DIV
它本身的 onClick 事件(不再存在)。这引起了问题。通过添加这对我DIV
的onClick
,我跑防止它指的是代码DIV
其取出后。