JS中文档的加载

最新推荐文章于 2024-04-19 13:30:52 发布

Fantasc

最新推荐文章于 2024-04-19 13:30:52 发布

阅读量310

点赞数

分类专栏： JS基础学习文章标签： javascript

本文链接：https://blog.csdn.net/Fantasc/article/details/119245798

版权

JS基础学习专栏收录该内容

78 篇文章 8 订阅

订阅专栏

浏览器在加载页面的时候，是按照从上往下的顺序加载的，读取到一行就运行一行，如果将JS代码写到head部分，那么在代码执行时，页面还没有加载，DOM对象也就没有加载，会导致我们无法获取到DOM对象。

- 将JS代码写到页面的下面，就是为了让其在页面加载完毕以后在执行，确保DOM对象的获取顺利

- JS代码写在head部分上面会影响到页面加载的性能，加载页面的时候会先加载，但是没有获取DOM对象，无法执行。写在body的部分就能使其后加载后执行，不会影响页面的加载性能。但是写在head部分方便管理

onload事件会在整个页面加载完成以后才会触发，给window绑定一个onload事件，该时间对应的响应函数，将会在页面加载之后再执行，这样可以确保代码执行时，所有的DOM对象都已经加载完毕了。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>

    <script type="text/javascript">
		//想将JS代码写在head部分的时候，要将事件响应函数全都写在onload事件内，以确保所有的DOM对象都已经被加载了
        window.onload = function(){
        	//获取id为btn的按钮对象，这里的按钮就是一个DOM对象
            var btn = document.getElementById("btn");
        
			//为按钮绑定响应事件
            btn.onclick = function(){
                alert("我是在head部分的JS代码，我会在整个页面加载完之后再执行");
            };
        };       
    </script>

</head>
<body>
        
    <button id="btn">我是一个按钮</button>
    <!-- <script type="text/javascript">
        //获取id为btn的按钮对象
        var btn = document.getElementById("btn");
        //为按钮绑定单击事件
        btn.onclick = function(){
            alert("hi");
        };
    </script> -->

</body>
</html>

Fantasc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中文档的加载

       浏览器在加载页面的时候，是按照从上往下的顺序加载的，读取到一行就运行一行，如果将JS代码写到head部分，那么在代码执行时，页面还没有加载，DOM对象也就没有加载，会导致我们无法获取到DOM对象。- 将JS代码写到页面的下面，就是为了让其在页面加载完毕以后在执行，确保DOM对象的获取顺利- JS代码写在head部分上面会影响到页面加载的性能，加载页面的时候会先加载，但是没有获取DOM对象，无法执行。写在body的部分就能
复制链接

扫一扫