为什么每次迭代都会创建不同的 div？

Question

我是 JavaScript 编程新手，我正在尝试创建一个 16 x 16 网格。我之前用 python 和 java 编写过代码，但它们都没有像您在 Web 开发中那样真正使用元素和标签。

截图

我找到了一个教程，但我试图了解当每次引用相同时如何单独创建所有 div。是否为循环的每次迭代在内存中分配了新位置？在本教程中，他们还将事件侦听器放入循环内。这不是行不通吗，因为循环结束后事件侦听器停止工作？

也许这是一个愚蠢的问题，但除非深入解释，否则我无法理解事情。

Answer 1

如果我正确理解你的问题，答案是你正在创建的 div 元素：

const gridCell = document.createElement("div");

依次插入到 DOM 中：

sketchArea.appendChild(gridCell);

此时，该 Element 被常量

gridCell

引用，但它存在于页面的 DOM 本身中。一旦循环结束并且

gridCell

超出范围，您将不再持有对该元素的引用，但该元素仍然存在。 （事实上，您可以稍后通过 查询 DOM 再次取回它。）

如果您熟悉其他编程范例，也许将此代码视为类似于使用数据库的东西会有所帮助。如果您在内存中创建一个“行”并将其插入数据库，那么当内存中的行被删除/销毁/垃圾收集时，它不会消失。内存中的变量只是一种创建和访问行数据的机制，行数据实际上存储在数据库中。

在 Javascript 代码中，您在内存中创建元素并将它们插入到 DOM 中。只要网页存在，它们就会在您的程序完成后继续存在。