如何在JavaScript中修改对象数组元素值？DOM集合交换失败排查

为什么直接交换HTMLCollection元素不生效？ #

你用document.getElementsByClassName("card")获取到的cards并不是真正的JavaScript数组，而是HTMLCollection——这是一个动态的类数组对象，它会实时同步DOM的变化，但不支持像普通数组那样通过下标直接赋值交换元素引用。你尝试的cards[0] = cards[2]这类操作对HTMLCollection完全无效，因为它的元素引用是只读的（这里的只读指无法直接替换集合内的元素指向，而非DOM元素本身不可修改）。

正确的DOM元素交换方式 #

要实现页面上两个卡片的位置交换，推荐两种思路：

1. 转成真实数组后操作DOM
   先把类数组的HTMLCollection转换成普通数组，再借助DOM方法交换元素位置：

// 转换为真正的数组
const cardsArray = Array.from(document.getElementsByClassName("card"));
// 获取要交换的两个元素
const cardFirst = cardsArray[0];
const cardThird = cardsArray[2];
// 用insertBefore完成位置交换
cardFirst.parentNode.insertBefore(cardThird, cardFirst);

2. 直接操作DOM节点位置
   无需转数组，直接定位DOM元素后用插入方法交换：

const card1 = document.getElementById("card1a");
const card3 = document.getElementById("card2a");
// 保存第一个元素的下一个兄弟节点，避免插入时位置错乱
const nextNode = card1.nextSibling;
// 先把第三个元素插到第一个元素前面
card1.parentNode.insertBefore(card3, card1);
// 再把第一个元素插到原本的下一个节点前面
card1.parentNode.insertBefore(card1, nextNode);

如何在JavaScript中修改对象数组的元素值？ #

分两种常见场景说明：

1. 普通对象数组的修改 #

如果是普通的对象数组（比如const objArr = [{id:1, content:'a'}, {id:2, content:'b'}]），直接通过下标访问修改属性或替换整个元素都可行：

// 修改对象的属性值
objArr[0].content = '更新后的内容';
// 替换整个数组元素
objArr[1] = {id:3, content:'全新元素'};

2. DOM元素数组的修改 #

如果是从HTMLCollection转换而来的DOM元素数组，你可以修改这些元素的DOM属性或内容，比如修改卡片上的数字：

const cardsArray = Array.from(document.getElementsByClassName("card"));
// 修改第一个卡片的文本内容
cardsArray[0].textContent = '5';
// 修改第二个卡片的样式
cardsArray[1].style.backgroundColor = '#f0f0f0';

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