html中js代码的加载顺序

最新推荐文章于 2021-05-30 20:23:02 发布

weiwei358

最新推荐文章于 2021-05-30 20:23:02 发布

阅读量137

点赞数

分类专栏： JavaScript 文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/weiwei358/article/details/83703492

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

搜索：[b]非阻塞JavaScript[/b]

对于一个html页面，head中有三个js代码段，并引入了四个js外部文件,head与body间有一个js代码段；body中有两个js代码段，body外有一个代码段；html外有一个js代码段；
在ABCD四个外部js中的第一行都有一行代码：alert(X +" start!"+ "---" + document.getElementById("testJS"));//X代表A、B、C、D
在B外部js中，有代码window.onload = function(){ alert("window.onload!"+ "---" + document.getElementById("testJS")); }
见附件！html如下：

<html>
    <head>
        <title>html中js代码的加载顺序</title>
        <script type="text/javascript">
            var a = 0;
            alert(a+"--head start!" + "---" + document.getElementById("testJS"))
            a++;
            function test(){
                a++;
                alert(a+"--"+document.getElementById("testJS").id);
            }
        </script>
        <script type="text/javascript" src="A.js"></script>
        <script type="text/javascript" src="B.js"></script>
        <script type="text/javascript">
            alert(a+"--head middle!" + "---" + document.getElementById("testJS"));
            a++;
        </script>
        <script type="text/javascript" src="C.js"></script>
        <script type="text/javascript" src="D.js"></script>
        <script type="text/javascript">
            alert(a+"--head end!" + "---" + document.getElementById("testJS"));
            a++;
        </script>
    </head>
  <script type="text/javascript">
      alert(a+"--head-body!" + "---" + document.getElementById("testJS"));
      a++;

  </script>

  <body>
      <script type="text/javascript">
          alert(a+"--body start!" + "---" + document.getElementById("testJS"));
          a++;
      </script>
      <input type="button" id="testJS" value="此处上面的js代码都获取不到该元素，下面的可以读取到" onclick="test()"/>
      <script type="text/javascript">
          alert(a+"--body end!" + "---" + document.getElementById("testJS"));
          a++;
      </script>
  </body>
  <script type="text/javascript">
      alert(a+"--BODY-HTML!" + "---" + document.getElementById("testJS"));
      a++;
  </script>
</html>
<script type="text/javascript">
    alert(a+"--HTML外!" + "---" + document.getElementById("testJS"));
    a++;
</script>

打开这个html页面，运行结果如下，依次alert打印：
0--head start!---null
1--A start!---null
2--B start!---null
3--B end!---null
4--head middle!---null
5--C start!---null
6--D start!---null
7--head end!---null
8--head-body!---null
9--body start!---null
10--body end!---[object]
11--BODY-HTML!---[object]
12--HTML外!---[object]
13--window.onload!---[object]
然后点击按钮，会alert打印出input的id为：14--testJS
以后每点击一次按钮，会加1；

[color=darkblue][b]总结：[/b][/color]
html页面中html代码以及js加载的顺序是：
按照文档里的先后顺序，从上往下依次加载：先加载head标签中的js代码段以及引入的js，然后加载body标签中的html代码以及js代码，再加载body标签下面的js代码，直到将页面加载完全，最后才执行window.onload方法。
在html中写js代码要注意，一定要在某个页面元素加载后再去执行document.getElementById访问它，否则没有加载到它时会是null，报错！

remark：可以用[b]chrome调试javascript[/b]，可以像调试java代码一样简单，就不需要用alert了。
chrome调试javascript用法链接：http://blog.csdn.net/wqc02/article/details/8838276

weiwei358

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中js代码的加载顺序

搜索：[b]非阻塞JavaScript[/b]对于一个html页面，head中有三个js代码段，并引入了四个js外部文件,head与body间有一个js代码段；body中有两个js代码段，body外有一个代码段；html外有一个js代码段；在ABCD四个外部js中的第一行都有一行代码：alert(X +" start!"+ "---" + document.getElementById...
复制链接

扫一扫

专栏目录