javascript - 使用 for 循环重命名节点集合中的类不起作用

Question

<script type="text/javascript">
    function renameClass() {

        a = document.getElementsByClassName('day');
       for (var j = 0; j < a.length; j++)
        {
          a[j].className = 'test';  
        }; 

    }

</script>



<div class="day" id="1">DÃY A</div>
<div class="day" id="2">DÃY B</div>

.... .. DY C

<button onclick="renameClass()"> rename all classes</button>

and this is result:
/*
<div class="test" id="1">DÃY A</div>
<div class="day" id="2">DÃY B</div>

... DY B DY C */

<button onclick="renameClass()"> rename all classes</button>

结果数是6，但总共是12。为什么只重命名6个类？请帮帮我

Answer 1

正如 Tushar 在评论中指出的那样，getElementByClassName() 返回 live node collection 。这意味着对 DOM 的更改会反射(reflect)在集合中。

当您循环访问集合并更改类名时，实时集合会更新并且循环的索引将被丢弃。

例如，在循环的第一次迭代中，第一个元素的 className 更改为 test。事件节点集合已更新，现在减少了 1 个元素。也就是说，该集合包含原始集合的元素 2-6。

在循环的第二次迭代中，它更改了 element[1] 的 className，它是原始集合中的第三个元素。事件节点集合已更新，现在包含 4 个元素(原始集合的元素 3-6)。

在循环的第三次迭代中，它更改了 element[2] 的 className，它是原始集合的第 5 个元素。

结果是只有一半的元素应用了新类。

要解决这个问题，您可以按相反的顺序循环遍历元素。

var renameClass = function() {
  var a = document.getElementsByClassName('day');
  for (var j = a.length-1; j >= 0; j--) {
    a[j].className = 'test';  
  }; 

}

.test {
  background-color: red;
}

<button onclick="renameClass()"> rename all classes</button>


<div class="day" id="1">DÃY A</div>
<div class="day" id="2">DÃY B</div>
<div class="day" id="3">DÃY C</div>
<div class="day" id="4">DÃY D</div>
<div class="day" id="5">DÃY E</div>
<div class="day" id="6">DÃY F</div>