Javascript CreateElements推送到数组

我在理解这段代码时遇到了一些问题，也许我缺少了一些基础知识

JS:

const grid = document.querySelector('.grid')
let squares = []

function createGrid() {
    //create 100 elements with a for loop
    for (let i=0; i < 100; i++) {

    const square = document.createElement('div')

    square.classList.add('square')

    grid.appendChild(square)

    squares.push(square)
    }
}

squares[10].classList.add('snake') //magic happens

为什么正方形数组元素会动态地影响正方形。（正方形[0]。类列表。添加（'snake'））

为什么在数组元素上放置样式会影响创建的元素

正方形应该是“静态”数组吗

谢谢

为什么正方形数组元素会动态地影响正方形

在DOM中的某个位置追加元素并不会将其从数组中移除

---

数组继续保存对DOM元素的引用。

因为JS通过引用传递对象…

.snake {
    background-color: green;
}