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 实例是事件的，这意味着它们会随着其中的元素发生变化而动态变化。例如，如果您执行 .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，该API不返回实时NodeList。 .querySelectorAll() 函数是一个通用 API，它查找 DOM 节点，但不返回事件列表(它仍然是 NodeList，但不是事件的)。因此，您可以使用 .getElementsByClassName() 而不是

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