如何在 JavaScript 中更改对象数组中元素的值？答案

【问题标题】：How to change value of element in object array in JavaScript?如何在 JavaScript 中更改对象数组中元素的值？
【发布时间】：2018-10-18 20:41:43
【问题描述】：

这是我的 html 列表-

<ul id="board"> 
    <li class="card" id="card1a">1</div>
    <li class="card" id="card1b" >2</div>
    <li class="card" id="card2a" >3</div>
    <li class="card" id="card2b" >4</div>
</ul>

我在 javaScript 中创建了一个数组：

var cards=document.getElementsByClassName("card");

比我尝试替换数组中的元素-

var temporaryValue = cards[0];
cards[0] = cards[2];
cards[2] = temporaryValue;

它不起作用：cards[0] 和 card[2] 保持相同的值。我不知道为什么。请帮忙！

【问题讨论】：

您是否要更改 html 列表中的值（ul 和 li）我们就在 cards 变量中？
您只是在更改元素引用，而不是它们指向的实际 <li> 元素。如果要“更改” HTML，则需要删除 <li>，然后将其插入其他位置。

标签： javascript html arrays dom

【解决方案1】：

您似乎正在尝试更改 textContent

这就是你的做法

cards[0].textContent = cards[2].textContent

var cards=document.getElementsByClassName("card");

cards[0].textContent = cards[2].textContent

<ul id="board"> 
    <li class="card" id="card1a">1</li>
    <li class="card" id="card1b" >2</li>
    <li class="card" id="card2a" >3</li>
    <li class="card" id="card2b" >4</li>
</ul>

【讨论】：

【解决方案2】：

document.getElementsByClassName 不返回数组。它返回一个实时的 HTMLCollection——一个 类数组 对象（即：一个提供类似 API 的对象），其中包含按文档顺序匹配的元素。内容反映了文档的实际状态，您不能只是在其中交换内容。

如果你想交换元素本身，你可以使用 DOM 来做。（当您这样做时，更改也会传播到您的列表。）如果您只想拥有一个可以交换条目的数组，然后将列表复制到您自己的数组中。

【讨论】：

谢谢，那是我的错。

【解决方案3】：

使用 .getElementsByClassName("card");您只是获取 html 元素的引用而不是直接获取值，您可以使用 innerText 替换并获取元素内的文本。

var temporaryValue = cards[0].innerText;
cards[0].innerText = cards[2].innerText;
cards[2.innerText = temporaryValue;

希望对你有帮助！

【讨论】：