getElementsByClassName 奇怪的行为，跳过某些元素

Question

我在使用 getElementsByClassName 时遇到一些非常奇怪的行为，我不确定是什么原因造成的。

如果我尝试将所有元素从 class B 交换到 class 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>

我不知道为什么会这样，如果可能的话我很乐意修复它。

如有任何帮助，我们将不胜感激！

Answer 1

您可以使用 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>

getElementsByClassName 奇怪的行为，跳过某些元素

getElementsByClassName strange behavior, skipping certain elements

html

javascript

getelementsbyclassname