title: Get All Elements By ClassName and Change ClassName
body: <p>I would like to...</p>
  
  <ol>
  <li>Scan the document for all elements that have a certain class name</li>
  <li>Perform some key functions on the innerHTML of that element</li>
  <li>Change the class name of that element so that if I do another scan later I don't redo that element</li>
  </ol>
  
  <p>I thought this code would work but for some reason it breaks the loop after the first instance and the element's class names are never changed. No frameworks please.</p>
  
  <pre><code>function example()
  {
      var elementArray;
  
      elementArray = document.getElementsByClassName("exampleClass");
  
      for(var i = 0; i &lt; elementArray.length; i++)
      {
          // PERFORM STUFF ON THE ELEMENT
          elementArray[i].setAttribute("class", "exampleClassComplete");
          alert(elementArray[i].className);
      }   
  }
  </code></pre>
  
  <p><strong>EDIT (FINAL ANSWER)</strong> -- Here is the final product and how I have implemented @cHao's solution within my site. The objective was to grab an assortment of timestamps on the page and change them to time ago. Thank you all for your help, I learned a ton from this question.</p>
  
  <pre><code>function setAllTimeAgos()
  {
      var timestampArray = document.getElementsByClassName("timeAgo");
  
      for(var i = (timestampArray.length - 1); i &gt;= 0; i--)
      {
          timestampArray[i].innerHTML = getTimeAgo(timestampArray[i].innerHTML);
          timestampArray[i].className = "timeAgoComplete";
      }
  }
  </code></pre>