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

by

getElementsByClassName, like other HTML collections, is “live”, that is, when you assign another class name to its member, it’s removed from the collection on the fly and its length gets decremented. That’s why your loop runs only 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:

An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.

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

while(x.length > 0) {
   x[0].className="otherClass";  
}

More Related Contents:

  1. Making a quiz in HTML and Javascript [closed]
  2. Add/Remove Class of Nav Objects on Page Scroll
  3. javascript function doesn’t work when link is clicked
  4. How to save an image to localStorage and display it on the next page?
  5. Is it wrong to place the tag after the tag?
  6. How to check whether a Storage item is set?
  7. How to add line breaks to an HTML textarea
  8. Cache busting via params
  9. Using an HTML button to call a JavaScript function
  10. Get the position of a div/span tag
  11. How to make ng-bind-html compile angularjs code
  12. TinyMCE Paste As Plain Text
  13. Make function wait until element exists
  14. anchor jumping by using javascript
  15. Have a div cling to top of screen if scrolled down past it [duplicate]
  16. How to draw a line between two divs?
  17. How to convert html table to excel with multiple sheet?
  18. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  19. Dynamically using the first frame as poster in HTML5 video?
  20. play pause html5 video javascript
  21. How to check if input file is empty in jQuery
  22. Fill available spaces between labels with dots or hyphens
  23. How can I bind the html content in vuejs?
  24. canvas.toDataURL() Security Error The operation is insecure
  25. Uncaught TypeError: Cannot read property ‘top’ of undefined
  26. How to make an HTML element editable cross-browser?
  27. Is it possible to have multiple Twitter Bootstrap carousels on one page?
  28. Checking if a html5 video is ready
  29. how to save canvas data to file
  30. open dropdown list from javascript function [duplicate]

Leave a Comment