javascript - 创建/附加 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 并不反射(reflect)实际的 DOM 结构。

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

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

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

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

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

• 没有任何内容仍然指代他们
  • 其中包括 dom
  • 和DOM
  • 和任何局部变量
• 垃圾收集器运行。