Geek Answers Handbook

How to change class for all elements retrieved using document.getElementsByClassName

I have a table containing 3 rows. Each line has a class: .myClass .

Then I query the table rows with document.getElementsByClassName('myClass') and document.getElementsByClassName('myClass') over the elements, changing each row class to .otherClass .

However

 console.log(document.getElementsByClassName('otherClass'))

returns only one row.

And when I looked at the DOM, only the first line of .myClass changed the class to .otherClass ; the other remained untouched.

How to change the class of all .myClass strings to .otherClass ?

 var c = document.getElementsByClassName('myTable')[0]; var x = c.getElementsByClassName('myClass'); for (var i = 0; i < x.length; i++) { x[i].className = 'otherClass'; } x = c.getElementsByClassName('otherClass'); console.log(x); // only one element 
 <table class="myTable"> <tr class="myClass2"> <td>Content</td> <td>Content</td> </tr> <tr class="myClass"> <td>Content</td> <td>Content</td> </tr> <tr class="myClass"> <td>Content</td> <td>Content</td> </tr> </table>
+5
source share
3 answers

getElementsByClassName , like other HTML collections, is live, that is, when you assign a different class name to your member, it is removed from the collection on the fly and its length decreases. This is why the loop only works once.

 var x = document.getElementsByClassName('myClass'); alert("before: " + x.length); x[0].className='otherClass'; alert("after: " + x.length); 
 .myClass { color: black } .otherClass { color: red } 
 <b class="myClass">hi</b> <b class="myClass">hi</b>

Docs :

HTMLCollection in HTML DOM live; It is automatically updated when the underlying document changes.

To answer in the context of your question, you can set className for the first element until there are none left in the collection:

 while(x.length > 0) { x[0].className = 'otherClass'; }
+13
source

As georg pointed out in his answer , getElementsByClassName returns a "live" collection. This means that the array will be "updated" as the elements change.

To fix your problem, you should use a while loop, iterating while x.length exists, and only changing the first element of the HTMLCollection .

 var c = document.getElementsByClassName('myTable')[0]; var x = c.getElementsByClassName('myClass'); while (x && x.length) { x[0].className = 'otherClass' } var y = c.getElementsByClassName('otherClass'); alert(y.length); 
 .myClass { display:block; background-color: red; } .otherClass { display:block; background-color:green; } 
 <table class="myTable"> <tr class="myClass2"> <td>Content</td> <td>Content</td> </tr> <tr class="myClass"> <td>Content</td> <td>Content</td> </tr> <tr class="myClass"> <td>Content</td> <td>Content</td> </tr> <table>
+2
source
Georg is right. The array element is updated on the fly, so you cannot depend on its length;

Try this code:

 var c = document.getElementsByClassName('myTable')[0], x = c.getElementsByClassName('myClass'); while (x.length) { x[0].className = 'otherClass'; } var y = c.getElementsByClassName('otherClass'); alert(y.length);

Working violin

+1
source

More articles:


All Articles