removeChild真的删除了元素吗？

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(...);