移动或连接元素时，对元素的引用会中断吗？

Question

我是JS新手，仍然不太清楚DOM是如何工作的。我有几个尖锐的问题。

如果我有一个DOM元素，像一个参考......

var element = document.createElement("DIV"); 

这是否参考保持有效，当我...

​​

或者......

foo.insertBefore(element, bar); 

最后，当我将一个DOM节点指向一个变量时，究竟存储了什么？幕后还有其他魔法ID吗？谢谢。

Answer 1

当您在JavaScript中引用任何内容时，只要您拥有该引用，该引用就会保持有效。这包括DOM对象以及普通的JavaScript对象。

考虑这种非DOM例子得到的想法：

var objects = { 
    one: { foo: 'bar' }, 
    two: { hoo: 'har' } 
}; 

var won = objects.one; 
console.log('objects:', objects); 
console.log('won:', won); 
delete objects.one; 
console.log('objects:', objects); 
console.log('won:', won); 

如果粘贴到JavaScript控制台，它会记录：

objects: Object {one: Object, two: Object} 
won: Object {foo: "bar"} 
objects: Object {two: Object} 
won: Object {foo: "bar"} 

正如你所看到的，删除one来自objects的财产对存储在won变量中的附加参考没有影响。

DOM元素也是如此。当你创建一个DOM元素并且持有它的引用时，那个引用—和它引用的对象—不会消失，除非你释放该引用并且没有其他未完成的引用。例如，该函数创建一个DOM元素，但不能保持它的任何引用：

function silly() { 
    var foo = document.createElement('div'); 
} 

silly(); 

这里我们创建了一个DOM元素，并把对它的引用在foo变量。但是，函数返回，它会销毁该变量并释放其对DOM元素的引用。该元素现在可以随时在任何时候垃圾收集。

这与你的例子不同，你实际上保留了一个变量来保存引用。

这是如何在幕后工作的？那么，这取决于特定的JavaScript引擎。大多数JavaScript引擎都是用C或C++编写的，并使用指针与垃圾收集或类似技术相结合。当你有一个引用时，通常不会有某种魔术ID查找来查找DOM元素;它更像是一个C中的直接指针引用。有一件事直接指向另一个，它与JavaScript中一个变量“指向”（持有引用）的方式非常类似。

当然，正如@Mics指出的那样（双关意图），确切的细节依赖于实现。它可以可以是一个神奇的ID查找，或几乎任何东西，只要JavaScript代码的行为是指定的。