JS修改squares数组DOM元素类名为何可直接渲染Pacman游戏棋盘？

核心原因 #

你操作squares数组内的元素和直接操作grid容器内的可见DOM元素效果完全一致，因为JavaScript中的DOM对象属于引用类型，不存在多份拷贝：

• 调用document.createElement('div')创建的square是内存中唯一的DOM实例
• grid.appendChild(square)是将这个DOM实例挂载到页面渲染树，让它可以被用户看到
• squares.push(square)只是把这个DOM实例的引用存入数组，没有生成新的DOM副本
• 后续通过squares[i].classList.add()修改属性时，实际修改的是内存里的同一个DOM对象，变化会自动同步到页面渲染结果中，不需要额外手动更新grid容器内的元素

你可以执行console.log(squares[i] === grid.children[i])验证，返回结果为true，说明两者完全是同一个元素。

内容的提问来源于stack exchange，提问作者Osocman