文档的加载顺序

最新推荐文章于 2024-09-11 16:41:33 发布

_洋

最新推荐文章于 2024-09-11 16:41:33 发布

阅读量310

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/123970324

JavaScript 专栏收录该内容

52 篇文章

订阅专栏

本文探讨了浏览器加载HTML页面时JavaScript的执行顺序问题。由于JavaScript是解释型语言，浏览器会自上而下解析。当<script>标签位于页面顶部时，可能会因对象未定义导致错误。解决方案包括将JS代码移至<body>标签后或利用window.onload事件确保页面加载完毕后再执行JS。这两种方法能确保在正确的时间执行JavaScript，避免因页面元素未加载完成而引发的问题。

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

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取一行运行一行（解释型语言的特点）。

如果将script标签写到页面的上边，就会先执行<script>,再执行<body>,所以如果执行到script时调用 doument中创建的对象，就会出错，因为对象还没定义，所以有两种解决办法：

将JS代码编写到 <body>后面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <button id="btn">按钮</button>
      <script>
       console.log(document);

      // 获取对象
      var btn = document.getElementById("btn");

      // 给对象添加属性，并赋值(绑定处理函数)
      // 这样当对应的事件触发时，的时候就执行相对应的函数
      btn.onclick = function(){
        alert("你点我干啥");
      }
      // 像这种为单击事件绑定的函数，我们称为单击响应函数

    </script>
   
  </body>
</html>

设置函数使页面加载完成之后才执行JS函数
思路：
页面加载完成也是一个事件，也可以设置执行函数。
所以我们可以将所有的JS代码都写到页面加载完成这个事件的执行函数中即可。

加载完成事件：onload 事件
onload 事件会在页面或图像加载完成后立即发生。

onload对应的对象是window

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script>
      window.onload = function () {
        console.log(document);
        var btn = document.getElementById("btn");

        btn.onclick = function () {
          alert("你点我干啥");
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">按钮</button>
  </body>
</html>