title: document.getElementsByClassName in JavaScript
body: <p>I made two alert messages using Bootstrap 3. Each alert is a <strong>div</strong> with class <strong>alert</strong>.</p>
  
  <p>I'd like to add <strong>fade</strong> and <strong>in</strong> classes to each alert so that they fades when closing. </p>
  
  <p>Why does the JS script below not work?  Thank you.</p>
  
  <pre><code>var alerts = document.getElementsByClassName("alert");
  for (var i = 0; i &lt; alerts.length; i++) {
    alerts[i].className += "fade in";
  }
  </code></pre>
  
  <p>I tried using jQuery and that worked.</p>
  
  <pre><code>$(document).ready(function() {
    $('.alert').addClass('fade in');
  });
  </code></pre>
  
  <p>Faulty code:
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
      var alerts = document.getElementsByClassName("alert");
      for (var i = 0; i &lt; alerts.length; i++) {
        alerts[i].className += "fade in";
      }
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="alert alert-success"&gt;
      &lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
      Message&lt;/div&gt;
    &lt;div class="alert alert-success"&gt;
      &lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
      Message&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>