2

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

如果我有对 DOM 元素的引用，例如...

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

当我...时，该参考是否仍然有效？

foo.appendChild(element);

或者...

foo.insertBefore(element, bar);

最后，当我将 DOM 节点指向变量时，究竟存储了什么？幕后有魔法ID，还是别的什么？谢谢。

4

1 回答 1

3

当您引用 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++ 编写的，并使用与垃圾收集或类似技术相结合的指针。当您有对 DOM 元素的引用时，通常不会有某种神奇的 ID 查找来查找它。它更像是 C 中的直接指针引用。一件事直接指向另一件事，其方式与 JavaScript 中变量“指向”（持有对）对象的方式非常相似。

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

于 2013-07-15T05:32:58.607 回答