JavaScript的加载执行顺序

最新推荐文章于 2024-08-24 22:23:34 发布

原创最新推荐文章于 2024-08-24 22:23:34 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何在HTML页面中正确地使用JavaScript进行元素操作，包括解决常见的脚本加载顺序问题及元素选择器的正确使用。

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

有多种方式可以将JavaScript包含到html页面中，如果不是动态加载脚本或者将其标记为延迟或异步，则按照页面中遇到的顺序加载脚本

<script>
        varbutton=document.getElementsByTagName('input');
        button.addEventListener('click',function()
 {
            varcontent=document.getElementsByTagName('p');
            content.style.background="red";
        })
    </script>
</head>

<body>
    <div>
        <p>Welcome to the world!!!</p>
        <inputtype="submit"value="点我">
    </div>
</body>

按照传统的做法所有<script>元素都应该放在页面的<head>元素中。这种做法的目的是把所有外部文件的引用放在相同的地方，可是，在文档<head>元素中包含JavaScript文件，意味着必须等到全部JavaScript代码都被下载解析和执行完之后，才能开始呈现页面的内容，对于需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟。

因为body是在head之后加载，因此在head的script脚本并不能找到body中的元素，所以当script脚本执行的时候div并不存在。

解决方案：

1. 将script放在body的结尾

好了，另外一个问题出现了，我发现好像这个程序并没有起任何的作用，才发现

document.getElementsByTagName

的类型是NodeListOf，而我们只能给单个element.addEventListener,所以

var button=document.getElementsByTagName('input')[0]

才是正确的写法。