Javascript：每次for循环迭代时，数组的大小都会减小。 为什么？

Question

我试图更改具有相同类名的三个元素的类名。 但是，当我遍历for循环数组时，数组大小随每次迭代而减小。 结果，我无法更改所有三个元素的类名。 请可以给个建议。 我完全不知所措。

JavaScript的

 var i;

 for(i=0; i < toAssignArray.length; i++){
        console.log('size of aaray: '+ toAssignArray.length);
        console.log('id in array ['+ i +']: ' + toAssignArray[i].id);

        toAssignArray[i].className = 'toAssignOff';

        console.log('className of ['+i+']' + toAssignArray[i].className);

            }

HTML

 <div id="toAssign_thanhphan_618" class="toAssign" onclick="pcoment.assignThisAuthor('thanhphan', 'reply_618', '740')" style="display: inline;">Assign Comment</div>

 <div id="toAssign_jimmywhite_618" class="toAssign" onclick="pcoment.assignThisAuthor('jimmywhite', 'reply_618', '740')">Assign Comment</div>

 <div id="toAssign_anquoc_618" class="toAssign" onclick="pcoment.assignThisAuthor('anquoc', 'reply_618', '740')">Assign Comment</div>

安慰

[Log] size of aaray: 3 (pub_comments.js, line 604)
[Log] id in array [0]: toAssign_thanhphan_618 (pub_comments.js, line 606)
[Log] className of [0]toAssign (pub_comments.js, line 610)
[Log] size of aaray: 2 (pub_comments.js, line 604)
[Log] id in array [1]: toAssign_anquoc_618 (pub_comments.js, line 606)

Answer 1

您没有数组，但是有一个NodeList 。 在许多DOM API中，NodeList实例是live的 ，这意味着它们中的元素更改时它们会动态更改。 例如，如果执行.getElementsByClassName() ，则如果更改列表中的元素，使其不再具有相关的类名，则该元素将立即从列表中消失。

有两种方法可以解决此问题。 首先，您可以将NodeList转换为真实数组。 在现代（ES2015）JavaScript中，这非常简单：

var realArray = Array.of(nodeList);

在ES5中，这并不困难：

var realArray = Array.prototype.slice.call(nodeList, 0);

第二种选择是对列表进行不同的迭代。 代替使用带索引变量的for循环，而使用while循环并仅对第一个元素进行操作：

while (nodeList.length) {
  nodeList[0].className = ""; // or whatever
}

当然，只有在您始终要从列表中删除元素的情况下，此方法才起作用。 如果没有，那么我更喜欢使用“真实数组”方法。

我猜 第五种 选择是使用其他API，即不返回实时NodeList的API。 .querySelectorAll()函数是一个通用API，可查找DOM节点，但不返回活动列表（它仍然是NodeList，但不是活动列表）。 因此，您可以使用.getElementsByClassName()代替

var nodeList = document.querySelectorAll(".the-class-name");

Answer 2

通过更改节点列表来解决迭代的另一种标准方法是向后循环：

  for(i=toAssignArray.length-1 ; i >=0; i--){...