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

Question

I am attempting to change the classname of three elements that have the same classname. However, when i iterate through my for-loop array the size of the array decreases with each iteration. As a result, I am unable to change the classname of all three elements. Please can some one advise. I am at a total loss.

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>

console

[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

You don't have an array, you have a NodeList . From many DOM APIs, NodeList instances are live , which means they change dynamically when the elements in them change. If you do a .getElementsByClassName() for example, if you change an element in the list such that it no longer has the class name in question, it immediately vanishes from the list.

There are two ways to handle this. First, you can turn the NodeList into a real array. In modern (ES2015) JavaScript, that's super-easy:

var realArray = Array.of(nodeList);

In ES5, it's not much harder:

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

The second alternative is to iterate through the list differently. Instead of using a for loop with an index variable, use a while loop and only operate on the first element:

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

Of course that only works if what you're doing is always going to remove the element from the list. If not, then I prefer using the "real array" approach.

I guess a fifth third alternative would be to use a different API, one that doesn't return a live NodeList. The .querySelectorAll() function is a general-purpose API that finds DOM nodes but doesn't return a live list (it's still a NodeList, but it's not live). So instead of .getElementsByClassName() you'd use

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

Answer 2

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

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