javascript - document.getElementsByClassName() not working -

i trying create fallback in absence of jquery, have div class 'container' , style display: none

i use jquery fadein() div, create fade effect on page (re)load (i know there better ways this, way.)

however, in case of lack of jquery (!window.jquery) creating javascript solution make page visible.

but attempts @ using document.getelementsbyclassname() have far failed, , return 'undefined'
understand can loop through them, seems little ott targeting one element.

none of following attempts have worked:

1. all together, [0] node selection:

   document.getelementsbyclassname("container")[0].style.display = "block"; 

2. all together, without [0], want style (1) of elements class name "container":

document.getelementsbyclassname("container").style.display = "block";

3. set variable, take [0] node , style it*

   var container = document.getelementsbyclassname("container"); container[0].style.display = "block"; 

n.b. know there many questions of nature on so, mine different there 1 element class trying select, rather not loop through them.

the console throws following error message:

uncaught typeerror: cannot read property 'style' of undefined(anonymous function)

and when console.log them in each instance, says they're undefined

you running code before elements of class container exist.

your jquery works because have in $(document).ready callback ($( function( ) { ... common way this).

either add non jquery code window.onload event handler, or move script lower in html elements want select. right before closing </body> common place scripts require whole document available in dom.