前面我们写过的代码中，JavaScript 代码都是在整个 HTML 代码后面的，这样是为了确保 HTML 页面中的所有 DOM 元素都加载完毕了，才能让 JavaScript 代码正确的执行，如果我们把 JavaScript 代码写在了 head 里面，就会导致 JavaScript 代码先执行了，而有些 DOM 元素还没初始化，最终 JavaScript 代码报错。要避免这种问题，我们可以使用 onload 加载事件来解决。

第一种方式

在 HTML 的 body 标签中添加一个 onload 事件，事件对应一个命名函数，当整个页面加载完毕后，运行该命名函数。以这样的方式来实现页面先加载，而 JS 代码后运行的效果。

1
2
3
4
5
6
<body onload="load()">
    <h2>DOM 操作</h2>
    <div class="container">
        .....
    </div>
</body>

第二种方式

在 JavaScript 代码中设置

1
2
3
4
5
6
7
<script>
    function load() {
        //....
        //....
    }
    window.onload = load;
</script>

也可以给 onload 指定一个匿名函数，让匿名函数来调用多个想调用的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    function load() {
        //....
        //....
    }
    function load2() {
        //....
        //....
    }
    window.onload = function() {
        load();
        load2(); 
    }
</script>