创建/附加 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 结构。

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

您还为DOM 本身中的那些元素分配了一个引用。

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

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

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

• 没有任何东西仍然指向它们
  • 包括dom
  • 还有DOM
  • 和任何局部变量
• 垃圾收集器运行。