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

a817480

于 2019-03-27 21:58:00 发布

阅读量568

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zwer/p/10611219.html

本文探讨了为何不能在body标签前的script标签中定义JS全局变量来访问DOM元素，因为此时DOM元素尚未加载完成。通过实例演示，文章解释了正确的做法是在body标签后的script标签中定义JS全局变量，确保DOM元素已加载完毕。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

转载于:https://www.cnblogs.com/zwer/p/10611219.html