为什么这个for（）循环不起作用？

Question

I have multiple elements with same class name.

And I'm trying to change every elements' class name at once.

So I tried this js sentences.

function chngeClass2(from, to){  //chngeClass() is change class name of an element, using its id.
    var before;
    before = document.getElementsByClassName(from);
    for(i=0,len=before.length ; i<len ; i++){
        before[i].className = to;
    }
}

chngeClass2('test', 'test_ani');

But it isn't working.

I don't know why.

Why this code is not working? What is the problem?

Answer 1

The getElementsByClassName() function returns a live list of DOM nodes. That it's "live" means that as you change the elements involved, the list changes. When you change the class of an element, it's no longer in the list!

You can deal with that issue by either copying the node list into a plain array before you alter any elements, or simply iterate with a while loop until the list is empty, just looking at the first element on each iteration:

var before = document.getElementsByClassName(from);
while (before.length)
  before[0].className = to;

You'd also probably want to add a test to make sure that "to" isn't a string that includes the class "from", or else the loop will never terminate. In fact, because in the general case of a function like yours it'd be hard to figure out whether there'd be an infinite loop, it might be easier to do the array copy approach:

var before = document.getElementsByClassName(from);
before = [].slice.call(before, 0);
for (var i = 0; i < before.length; ++i)
  before[i].className = to;

Answer 2

When you change the class name, the element there is not exist any more, assume that you have 4 element with that class, so when you change the first class, you have 3 class and when you change the second class, 2 class are remained but the loop is in 3th call and is reached to before[2] , it cause an error, because it look for 3th element but you have only 2 element after first and second changes.

Use this:

    function chngeClass2(from, to){
    var before;
    before = document.getElementsByClassName(from);
    for(i=0,j=before.length ; i<j ; i++){
        before[0].className = to;
    }
}
chngeClass2('test', 'test_ani');

Check JSFiddle Demo