创建/追加 HTML 元素(浏览器内存)

Question

当我appendChild() dom[0]时，您会认为它dom[1]移动并dom[2]，但实际上它复制/复制了dom[0]下面的元素，因为它们仍然是实际dom数组的元素。

//.JS

var dom = [];
var element = new Array("div","p","h1");
for(var i=0; i < element.length; i++){
    dom.push(document.createElement(element[i]))
}
dom[0].appendChild(dom[1]);
dom[0].appendChild(dom[2]);
console.log(dom); //div,p,h1
console.log(dom[0].children);//p,h1
console.log(dom.length); //3

问：什么时候会从内存中删除元素？

Answer 1

你的问题来自一个非常错误的假设：

数组dom不镜像实际的DOM结构。

您正在创建三个元素，并将对这些元素的引用分配给数组中。

您还将在DOM本身中分配对这些元素的引用。

因此，每个元素最终都有两个指向它的引用——dom数组和DOM本身。

引用完全独立于元素本身。 您可以创建六个局部变量，这些变量都指向相同的元素。

在以下情况下，将释放元素：

• 没有什么仍然指代他们
  • 这包括dom
  • 还有DOM
  • 和任何局部变量
• 垃圾回收器运行。