Question

var a = {
  div: document.getElementById('#div')
};

如果删除div会怎么样？

a.div对象是否仍在内存中？

Answer 1

我认为这取决于它的删除方式以及您想要做的事情。看看this小提琴。如果删除该元素，则无法重新访问该元素，它将返回null。但是因为你已经在内存中创建了一个存在的引用，除非你删除该变量。请注意，您可以删除该元素，然后根据需要重新添加。

<div id="target">Target</div>
<div id="toggle">Remove Element</div>
<div id="log">Log Element</div>
<div id="get">Get Element</div>
<div id="append">Re-append element</div>

<script>
var target = document.getElementById('target');

//log the variable
document.getElementById('log').addEventListener('click', function(){
    console.log(target);    
}, false);

//remove the element
document.getElementById('toggle').addEventListener('click', function(){
    target.parentElement.removeChild(target);
}, false);


//now check if the element exists
document.getElementById('get').addEventListener('click', function(){
    console.log(document.getElementById('target'));
}, false);


//re-add the previously deleted element
document.getElementById('append').addEventListener('click', function(){
    document.body.appendChild(target);
}, false);
</script>

Answer 2

从DOM中删除DOM元素不会对指向它的其他引用执行任何操作。所以，如果你这样做：

var a = {
  div: document.getElementById('div')
};


var t = document.getElementById("div");
t.parentNode.removeChild(t);
t = null;

然后，a.div仍将指向原始DOM对象。它将不再插入DOM中，但仍将通过a.div引用存在。

DOM元素仍然存在，任何其他引用仍然存活且正确。删除的DOM元素不再在DOM中，但实际上不会从内存中删除，直到没有更多的引用 - 这就是垃圾收集的工作方式。

P.S。您可能并不想将'#div'与document.getElementById()一起使用，因为它只需要id，而没有选择器前缀。

删除对象时会发生什么但仍有变量指向它？

2 个答案: