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--){...