Get All Elements By ClassName and Change ClassName

by

The problem is that the NodeList returned to you is “live” – it changes as you alter the class name. That is, when you change the class on the first element, the list is immediately one element shorter than it was.

Try this:

  while (elementArray.length) {
    elementArray[0].className = "exampleClassComplete";
  }

(There’s no need to use setAttribute() to set the “class” value – just update the “className” property. Using setAttribute() in old versions of IE wouldn’t work anyway.)

Alternatively, convert your NodeList to a plain array, and then use your indexed iteration:

  elementArray = [].slice.call(elementArray, 0);
  for (var i = 0; i < elementArray.length; ++i)
    elementArray[i].className = "whatever";

As pointed out in a comment, this has the advantage of not relying on the semantics of NodeList objects. (Note also, thanks again to a comment, that if you need this to work in older versions of Internet Explorer, you’d have to write an explicit loop to copy element references from the NodeList to an array.)

More Related Contents:

  1. Fade animation while scrolling
  2. Fetch: POST JSON data
  3. What’s the effect of adding ‘return false’ to a click event listener?
  4. What does a script-Tag with src AND content mean?
  5. Chrome desktop notification example [closed]
  6. Detect rotation of Android phone in the browser with JavaScript
  7. Ajax, back button and DOM updates
  8. Async function not returning value, but console.log() does: how to do? [duplicate]
  9. How to convert a plain object into an ES6 Map?
  10. Why is immutability so important (or needed) in JavaScript?
  11. Ng-model does not update controller value
  12. Arguments.callee is deprecated – what should be used instead?
  13. setInterval in a React app
  14. Attach an event in a child iframe to a handler in the parent window
  15. Transforming a Javascript iterable into an array
  16. Are ES6 module imports hoisted?
  17. issue with comparing two numbers in javascript
  18. Enabling Save button on JQ Grid with InlineEditing and CellEdit
  19. regex pattern to match the end of a string
  20. Safe value must use [property]=binding after bypass security with DomSanitizer
  21. Subtracting long numbers in javascript
  22. Precedence: Logical or vs. Ternary operator
  23. Escaping HTML entities in JavaScript string literals within the block
  24. Recursive tree search in a nested object structure in JavaScript
  25. TypeError: document.body is null
  26. object destructuring: how to use intermediate nested property
  27. Jquery/Javascript Opacity animation with scroll
  28. Alerts when navigating away from a web page
  29. Node JS fs module inside browser
  30. Does jQuery strip some html elements from a string when using .html()?

Leave a Comment