为何不能在 body 标签的前面的 script 标签中定义 JS 全局变量?

时间 2019-12-13

标签为何不能 body 标签前面 script 定义全局变量栏目 JavaScript 繁體版

原文原文链接

<!DOCTYPE html>
<!--
    为何不能在 body 标签的前面的 script 标签中定义 JS 全局变量？
    
    在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执行的
    这时处于代码下面的页面元素尚未加载完，访问不到。
        
    解决方法： 在 body 标签的后面 script 标签中定义 JS 全局变量
-->
<html>
    <head>
        <script>
            
            var  id =  document.getElementById("test");
            alert(id); //获取不到 div 的对象
            
            function  testDemo(){
                
                var  id2 =  document.getElementById("test");
                alert(id2); //能够获取到 div 对象
            }
            
        </script>
    </head>
    
    <body>
            <div id="test">test</div>
            <hr boder="solid red 3px"/>
            <button onclick="testDemo()">测试按钮</button>
    </body>
</html>
<script>
        
        var  id =  document.getElementById("test");
        alert(id); //获取不到 div 的对象
    
</script>