js在html中的加载01

最新推荐文章于 2024-07-31 11:05:25 发布

zpt912

最新推荐文章于 2024-07-31 11:05:25 发布

阅读量363

点赞数 1

分类专栏： js学习

本文链接：https://blog.csdn.net/zpt912/article/details/79019039

版权

js学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天学习js中发现这么一件事，写了如下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom1</title>
<script type="text/javascript">

function fn(obj) {
alert(obj); -----------------后来加的打印
obj.className="selected"; -----------------报错位置
}
</script>
<style>
.selected{
background-color: #ffee99;
}
</style>
</head>
<body>

<script type="text/javascript">
var obj=document.getElementById("i3");
alert(1);

</script>

刚开始在google浏览器中运营，一直报错，显示的是obj.className="selected"; 这句代码有错，刚开始一直不清楚哪出错了，后来在程序中加了打印菜发现，在head标签中的obj打印出来为null。按照java的思维，不应该为null的，obj我已经在body中给他赋值了。后面网上找了资料查看后才发现，浏览器在加载javascript时有2个特性：1.载入后马上执行；2.执行时会阻塞页面后续的内容。

当body中的javascript执行的时候，由于后面的内容被阻塞，i3这个值找不到，导致obj赋值失败，所以浏览器会报错；

解决办法：直接把body中javascript这一段代码放在a标签后面，或者直接放到html标签外面。

先写这么多，后面有新的学习心得再写

参考链接：https://www.cnblogs.com/CBDoctor/p/3745246.html

https://coolshell.cn/articles/9749.html