（前端学习笔记）01-html的执行顺序

最新推荐文章于 2022-08-02 18:09:59 发布

呂姑娘

最新推荐文章于 2022-08-02 18:09:59 发布

阅读量760

点赞数

分类专栏：前端学习文章标签： javascript html

本文链接：https://blog.csdn.net/a_ming77/article/details/124135947

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

01-html的执行顺序
刚开始学习html时，<head><body><title>等标签搞晕了我，有些执行顺序上的事情没有考虑到，导致代码已经修改结果还是无动于衷，例如：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>执行顺序</title>
    <script type="text/javascript" >
        function a(){
            alert('a:hello,world!')
        }
        function a(){
            alert('b:hello,world!')
        }
        document.getElementById("btn").onclick=function a(){
            alert('c:hello,world!')
        }
    </script>
</head>
<body>
    <input type="button" value="按我有窗口跳转" id="btn" onclick="a()"/>
</body>

浏览器执行html结果是弹窗’c:hello,world’,后面的getElementById根本没有被执行。原因是html自上而下执行，当执行到getELementById时，由于还没有加载下方<body>的btn，所以他找不到这个元素，因此无法将alert的内容变成‘c:hello，world!'，因此会跳过这行不执行。

<body>
    <input type="button" value="按我有窗口跳转" id="btn" onclick="a()"/>

    <script type="text/javascript" >
        function a(){
            alert('a:hello,world!')
        }
        function a(){
            alert('b:hello,world!')
        }
        document.getElementById("btn").onclick=function a(){
            alert('c:hello,world!')
        }
    </script>
</body>

btn已经加载完毕，后面的alert无论修改了几遍，都能找到btn元素并且执行修改，因此，最后弹窗alert的语句是‘c:hello，world!'

小结：