Question

这是我的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;

它没有用：卡[0]和卡[2]保持相同的值。我不知道为什么。请帮忙！

Answer 1

您似乎正在尝试更改textContent

你就是这样做的

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

＆＃13;

var cards=document.getElementsByClassName("card");

cards[0].textContent = cards[2].textContent

＆＃13;

<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>

＆＃13;

Answer 2

document.getElementsByClassName不会返回数组。它返回一个实时HTMLCollection - 一个类似数组的对象（即：一个呈现类似API的对象），它包含文档顺序中的匹配元素。内容反映了文档的实际状态，你不能只是在里面交换东西。

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

Answer 3

使用.getElementsByClassName（＆＃34; card＆＃34;）;你只需要获得html元素的引用而不是直接的值，你可以使用innerText来替换并获取元素内的文本。

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

希望它有所帮助！

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

3 个答案: