javascript - 当元素被移动或附加时，对该元素的引用是否会中断？

Question

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

如果我有一个 DOM 元素的引用，比如......

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

当我...时，该引用是否仍然有效

foo.appendChild(element);

或者...

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 的属性(property)对存储在 won 中的附加引用没有影响变量。

DOM 元素也是如此。当您创建一个 DOM 元素并持有对它的引用时，该引用(以及它所引用的对象)不会消失，除非您释放该引用并且没有其他未完成的对它的引用。例如，此函数创建一个 DOM 元素但不保留对它的任何引用:

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

silly();

这里我们创建了一个 DOM 元素并在 foo 中放置了对它的引用。多变的。但随后函数返回，这会破坏该变量并释放它对 DOM 元素的引用。该元素现在可以随时被垃圾回收。

这与您的示例不同，您实际上在其中保留了一个包含引用的变量。

这在幕后是如何运作的？好吧，这取决于特定的 JavaScript 引擎。大多数 JavaScript 引擎是用 C 或 C++ 编写的，并使用结合了垃圾收集或类似技术的指针。当您引用 DOM 元素时，通常不会使用某种神奇的 ID 查找来查找它；它更像是 C 中的直接指针引用。一个事物直接指向另一个事物，其方式与 JavaScript 中变量“指向”(持有对对象的引用)的方式非常相似。

当然，正如@Mics 指出的(双关语意)，确切的细节取决于实现。它可以是一个神奇的 ID 查找，或者任何东西，只要 JavaScript 代码的行为是指定的。