window.onload: 页面加载完成
一，window.onload的用法：
因为页面中的代码一般情况下按照，从上到下，从左到右的顺序执行。
所以当js代码需要获取页面中的元素时，如果script标签在元素的前面，需要加window.onload；如果script放在了元素后面，就不需要加 window.onload。
例一：点击按钮，实现div变大的效果（宽，高，增加200像素）。
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
document.getElementById("box").style.width="400px";
document.getElementById("box").style.height="400px";
}
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="确认">
<div id="box"></div>
</body>
注：例一在点击确认按钮时，页面上div并没有任何变化，原因是，由于程序是从上往下开始执行，运行到document.getElementById(“btn”)时，并没有发现“btn”这个元素，所以就会提示错误信息（null），此时的程序运行时也就没有任何JavaScript效果。
二，问题解决
把JavaScript中要执行的程序放在window.οnlοad=function(){}中，如例二：
例二：正确的代码
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").onclick=function(){
document.getElementById("box").style.width="400px";
document.getElementById("box").style.height="400px";
}
}
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="确认">
<div id="box"></div>
</body>