为什么要等页面加载完毕才加载JavaScript代码？

最新推荐文章于 2023-11-11 14:00:00 发布

若懿前端开发

最新推荐文章于 2023-11-11 14:00:00 发布

阅读量463

点赞数 1

本文链接：https://blog.csdn.net/B1234554321C/article/details/107603359

版权

首先，我需要通过JavaScript代码将h2标签里的文字变成红色。话不多说，直接甩代码。跟我来一起比较代码一和代码二。

代码一：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小飞自学编程</title>
</head>
<body>
<script>
	var get = document.getElementById("h1");
	get.style.color = "red";
</script>

	<h2 id="h1">我是小飞</h2>

</body>
</html>

结果：浏览器只是显示了加粗的文字，并没有按原先的想法变成红色。同时报了一个错误(未捕获的类型错误：不能读取无效的style属性。)
在这里插入图片描述

在这里插入图片描述

代码二：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小飞自学编程</title>
</head>
<body>

<h2 id="h1">我是小飞</h2>

<script>
	var get = document.getElementById("h1");
	get.style.color = "red";
</script>

</body>
</html>

结果：浏览器正常显示，未报错,得到了我想要的结果。在这里插入图片描述
分析：
当h2标签放到了script标签前面后,js代码能够正常运行了。
这意味着浏览器需要等到页面加载完毕之后才能执行js代码，因为如果先加载了js代码的话,此时 DOM 未加载，如果在 js 中获取 dom 节点是获取不到的。

总结：
为了避免js出现以上的错误，我们应该将js代码放到</body>(结束标签)之前。同时，你应该注意到一个细节，</body>结束标签与</script>结束标签是紧挨着的，它们之间没有html代码。

<body>
<script>
	//这里放js代码
</script>
</body>


//或者写成
<body>
<script>
	window.onload =function(){
  //js代码
}
</script>
</body>

或者在进行外部js代码引入的时候，应该将js代码进行如下书写，这样做的目的是保证在页面加载完后再运行js代码。

window.onload =function(){
  //js代码
}

若懿前端开发

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为什么要等页面加载完毕才加载JavaScript代码？

为什么要等页面加载完毕才加载JavaScript代码？首先，我需要通过JavaScript代码将h1标签里的文字变成红色。话不多说，直接甩代码。跟我来一起比较代码一和代码二。代码一：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>小飞自学编程</title></head><body><script&g
复制链接

扫一扫