getElementsByClassName странное поведение, пропуск определенных элементов

У меня очень странное поведение с getElementsByClassName, и я не уверен, что его вызывает.

Если я попытаюсь поменять местами все элементы из класса B в класс A, он заменит только определенные элементы, как показано ниже:

function swapClasses() {
    // Get all elements of class B
    const classBList = document.getElementsByClassName("classb");
    for (var i = 0; i < classBList.length; i++) {
        var classElem = classBList[i];
        // Swap its class from class B to class A
        classElem.className = "classa";
        // Swap the text as well
        classElem.textContent = "Class A";
    }
}
.classa {
    background-color: red;
}

.classb {
    background-color: green;
}
<div class="classa">Class A</div>
<div class="classb">Class B</div>
<div class="classb">Class B</div>
<div class="classb">Class B</div>
<div class="classb">Class B</div>
<button onclick="swapClasses();">Swap class B to class A</button>

Я понятия не имею, почему это происходит, и я хотел бы исправить это, если это возможно.

Любая помощь будет оценена по достоинству!


javascript html getelementsbyclassname
person MysteryPancake    schedule 24.11.2020    source источник
comment
getElementsByClassname возвращает действующую HTMLCollection... поэтому, изменяя classElem.className = "classa";, вы меняете коллекцию — предлагаем вам использовать document.querySelectorAll(".classb") и избежать проблемы — см. документация и прочитайте предупреждение :p   -  person Bravo    schedule 24.11.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать querySelectorAll и classList вместо живого списка узлов, который вы получаете с помощью getElementsByClassName.

function swapClasses() {
  // Get all elements of class B
  [...document.querySelectorAll(".classb")].forEach(div => {
    div.classList.add("classa");
    div.classList.remove("classb");
    // Swap the text as well
    div.textContent = "Class A";
  })
}
.classa {
  background-color: red;
}

.classb {
  background-color: green;
}
<div class="classa">Class A</div>
<div class="classb">Class B</div>
<div class="classb">Class B</div>
<div class="classb">Class B</div>
<div class="classb">Class B</div>
<button onclick="swapClasses();">Swap class B to class A</button>

person mplungjan    schedule 24.11.2020