title: document.getElementsByClassName() not working
body: <p>I am trying to create a fallback in the absence of jQuery, as I have a div with the class 'container' and a style <code>display: none</code>  </p>
  
  <p>I use jquery to <code>fadeIn()</code> this div, to create a fade effect on page (re)load (I know there are better ways to do this, however I would like to do it this way.)  </p>
  
  <p>However, in case of lack of jQuery <code>(!window.jQuery)</code> I am creating a JavaScript solution to make my page visible.</p>
  
  <p>But my attempts at using <code>document.getElementsByClassName()</code> have so far failed, and always return <em>'undefined'</em><br>
  I understand I can loop through them, but this seems a little OTT for targeting <em>one</em> element.</p>
  
  <p>None of the following attempts have worked:</p>
  
  <ol>
  <li><p>All together, with [0] node selection:</p>
  
  <pre><code>document.getElementsByClassName("container")[0].style.display = "block";
  </code></pre></li>
  <li><p>All together, without [0], as I want to style all (1) of the
  elements with the class name "container":</p></li>
  </ol>
  
  <p><code>document.getElementsByClassName("container").style.display = "block";</code></p>
  
  <ol start="3">
  <li><p>Set as a variable, then take the [0] node and style it*</p>
  
  <pre><code>var container = document.getElementsByClassName("container");
  container[0].style.display = "block";
  </code></pre></li>
  </ol>
  
  <p>N.B. I know there are many questions of this nature on SO, however mine is different as there is only one element with the class am trying to select, so I would rather not loop through them.</p>
  
  <p>The console throws the following error message:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'style' of undefined(anonymous function)</p>
  </blockquote>
  
  <p>And also when I <code>console.log</code> them in each instance, it says they're <code>undefined</code></p>