Question

removeChild函数是否真的完全删除子节点？或者它只是删除指定parant节点的子元素？如果它没有真正删除元素，有没有办法完全删除元素？

Answer 1

removeChild方法只是将其从父项中删除。如果它是页面的可见元素，它将从页面中删除。

但是Javascript有垃圾收集。这意味着只要任何变量引用它，节点对象本身就会保持存在。因此，您可以将一个节点分配给一个变量，使用removeChild从其父节点“修剪”它，然后将其插入或附加到其他节点，从而有效地在页面上移动它。

以下代码将删除一个节点，等待10秒再将其重新添加到树中（因此，再添加到页面）：

var oldNode = someNode.removeChild(...);
setTimeout(function () {
  document.documentElement.appendChild(oldNode);
}, 10000);

这意味着节点对象尚未从内存中删除，因为仍然有一个指向它的变量（即oldNode）。

另一个案例：

var node = document.getElementById('test');
// ... do stuff
node.parentElement.removeChild(node);
// 'node' still exists, but has been removed from the page
// ... do some more stuff
node = document.getElementById('hello');
// The variable 'node' now points to something else; 
//  this means the original node will be deleted from memory

另一方面，如果不将已移除的节点重新分配给另一个变量，则无法再访问它（不能通过文档树，因为它已从那里删除;而不是通过JS变量）;所以Javascript会自动从内存中清除它：

someNode.removeChild(...);

将删除的节点分配给变量，然后将null（或其他任何内容）分配给该变量 - 就像Marc B在他的回答中所暗示的那样 - 完全没必要，恕我直言，傻。

Answer 2

这将完全删除节点：

someNode.removeChild(...);

这会从DOM中移除节点，因此它不可见，但会将其保存，以便您可以将其插入其他位置：

oldNode = someNode.removeChild(...);

Answer 3

removeChild从dom中删除该元素，但是如果您正在执行删除操作以将其重新插入其他位置，它也会从该函数返回。您必须杀死该返回值才能真正摆脱被删除的节点：

oldNode = someNode.removeChild(...);
oldNode = null;

Answer 4

如果你想真正删除一个dom元素。仅使用removeChild是不够的。这是根据YSlow的作者Steve Sounders的说法。您需要使用删除

removeChild真的删除了元素吗？

4 个答案: