Javascript在页面加载时的执行顺序

Question

<input type="button" value="显示日期" id="myBtn" />
<script>
//window.onload=function() {
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
}
</script>
为什么这段JS代码必须放在myBtn后面才能起作用呢，放在前面和HEAD中都不管用，为什么加了1个Windows.onload就可以放在前面了~

Answer 1

1.如果没有添加window.onload的话，那么如果你把这段js代码放在myBtn前面，浏览器首先会加载这段js代码，然后就会运行这段代码，但是此时myBtn还未被浏览器加载渲染，所以就找不到这个元素。
2.如果你添加了window.onload，那么表示浏览器加载完所有的DOM之后才会运行这段js代码，所以，在这段代码运行之前，就可以找到myBtn这个元素，所以可以正常运行了。

Answer 2

因为你的这两句话

document.getElementById("myBtn").onclick=function(){displayDate()};
document.getElementById("demo").innerHTML=Date();

是需要获取到dom元素的，在你的页面还没有加载到body的时候，你就加载你的js代码，这时肯定是获取不到元素的，所以不起作用

加了

window.onload = function(){
    // ...
}

后，会等页面的dom元素和内容加载完毕后，才执行函数里面内容，这时才可以获取到相应的dom元素

Answer 3

window.onload

指的是在页面加载完成后执行。如果使用的是JQuery库的话

$(document).ready(function(){

});

这样是在DOM加载完成后执行