jquery document ready equivalent in Javascript? [duplicate]

Question

i want to put my javascript code in head instead of body, but because the head loads before the body section in the html document, my code becomes useless as all selectors become undefined.

in jquery i can use $(document).ready to overcome this problem, however i dont want to use jquery and i'm wondering if there's a solution for this in javascript.

i tried:

if(document.readyState === "complete") {/*my javascript code */}

and

window.onload = function(){/*my javascript code */}

but both doesn't work, any suggestions? thanks in advance.

HTML:

<div id="section" onClick="shout()">test</div>

JAVASCRIPT:

window.onload=function(){
function shout(){
var str = document.getElementById("section").innerHTML;
alert(str);
}
}