Как изменить значение элемента в массиве объектов в JavaScript?

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

document.getElementsByClassName не возвращает массив. Он возвращает активную коллекцию HTMLCollection - объект в виде массива (т. Е. Объект, представляющий аналогичный API), который содержит совпадающие элементы в порядке документа. Содержимое отражает фактическое состояние документа, вы не можете просто поменять его местами.

Если вы хотите поменять местами сами элементы, вы можете использовать DOM для этого. (При этом изменения также будут распространяться на ваш список.) Если вы просто хотите иметь массив, в котором можно обмениваться записями, скопируйте список в собственный массив.

Answer 2

с .getElementsByClassName ("карточка"); вы просто получаете ссылку на элемент html, а не значение напрямую, вы можете использовать innerText для замены и для получения текста внутри элемента.

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

Надеюсь, это поможет!

Answer 3

Похоже, вы пытаетесь изменить 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>