Javascript 数组中的元素会自动更新

我有一个普通数组，这个数组的每个元素都是一个HTML元素。 当我将HTML元素添加到数组中，然后更改该元素（更改其类或…）时，我的数组也会自动更新，但我不希望这样，我希望 我的数组保存html元素的旧状态

let btn=document.querySelector（'.btn'）；
设arr=[]；
btn.addEventListener（'click'，函数（e）{
arr.push（这个）；//现在'arr'是[button.btn]
console.log（arr）；//[button.btn]
this.classList.add（'something'）；//此行也将更新'arr'，但我不想要这个，我
//希望arr仍然保持[button.btn]
console.log（arr）；//[button.btn.something]
})

文件
点击我

当您将

此

附加到数组中时，您保存的是对当前元素的引用，而不是当前元素的副本。因此，当元素更改时，对该元素的所有引用都将反映这些更改

为了解决这个问题，您应该在将元素附加到数组之前创建一个副本，这样您就可以创建元素状态的“快照”并保存该快照，这样以后对元素的任何更改都不会反映在列表中元素的副本中

重要的变化是：

arr.push（this.cloneNode（true））
我正在通过调用
this.cloneNode（true）
创建一个副本，而不是仅仅追加
this


let btn=document.querySelector（'.btn'）；
设arr=[]；
btn.addEventListener（'click'，函数（e）{
arr.push（this.cloneNode（true））；//现在'arr'是[button.btn]
console.log（arr）；//[button.btn]
this.classList.add（'something'）；//此行也将更新'arr'，但我不想要这个，我
//希望arr仍然保持[button.btn]
console.log（arr）；//[button.btn.something]
})

文件
点击我
数组中的项目与之前相同，即按钮元素。向按钮添加一个类，那么数组中的元素也将拥有它，因为它是同一个元素。控制台日志只向您显示元素是什么，即使它没有显示something，它仍然有something类，因为您添加了它。如果不希望出现这种情况，则必须创建按钮的另一个副本