在JAVASCRIPT中，为什么document.getElementById不可以再全局（函数外）使用？

　　今天在使用JavaScript使用document.ElementById("ID")的时候，发现var x = document.getElementById("childDiv")在方法外定义的全局变量不能使用，在方法内部定义却可以使用。具体代码如下：
    <script type="text/javascript" charset="utf-8" async defer>
            var x = document.getElementById("childDiv")  /*无效的*/
            function addButton(){
                var e = document.createElement("input");
                e.type="button";
                e.value="被添加的按钮";
                x.appendChild(e)
            };
            function addSelect(){
                var e2 = document.createElement("select");
                e2.options[0] = new Option("上海","");
                e2.options[1] = new Option("北京","")
                e2.size = "2";
                x.appendChild(e2);
            };
            function addImg(){
                var e3 = document.getElementById("img1")
                x.appendChild(e3);
            }
        </script>
    <div>
        <img id="img1" src="img/view1.jpg" alt="星星" width="300" height="300">
        <input type="button" value="添加按钮" onclick="addButton()">
        <input type="button" value="添加选择框" onclick="addSelect()">
        <input type="button" value="添加图像" onclick="addImg()">
        <div id="childDiv"></div>
    </div>

　　这个问题我纠结了好一会，在网上查取一些资料，翻来覆去好一会才想到原因,稍微改一下顺序。
    <div>
        <img id="img1" src="img/view1.jpg" alt="星星" width="300" height="300">
        <input type="button" value="添加按钮" onclick="addButton()">
        <input type="button" value="添加选择框" onclick="addSelect()">
        <input type="button" value="添加图像" onclick="addImg()">
        <div id="childDiv"></div>
    </div>

　　<script type="text/javascript" charset="utf-8" async defer>
            var x = document.getElementById("childDiv")  /*有效的*/　　　　......
        </script>

　　原来在在函数外写的 javascript 会在页面初始化之前就已经加载, 页面未初始化时自然就获取不到尚未加载的ID（childDiv）,而当把这段JavaScript代码放在页面之后，就可以正常使用。所有在学习的时候一定要注意加载顺序的问题，不要犯小韩这样的小白错误呀。