移動或連接元素時，對元素的引用會中斷嗎？

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代碼的行爲是指定的。