新手第一次用引入js经常不起作用 , 明明没有拼写错就是没作用,多半把<script>放在了head里,
浏览器解析到<script>元素时会停止继续解析, 开始下载js脚本文件并执行,
但问题是这时候浏览器没解析到body部分,dom操作获取不了元素 , 所以js执行了但没成功获取元素,修改失败了
这时候就要用到defer属性推迟脚本执行
script元素的defer属性会告诉浏览器页面载入之后解析完才会执行<script.../>脚本中的内容,
我们来看看这玩意有啥用:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="defer.js" >
</script>
</head>
<body>
<div id="target"></div>
</body>
</html>
上面只定义了一个div并引入了js文档, 下边是js:
var tg=document.getElementById("target");
tg.innerHTML="js脚本生效!";
作用就是把空div里显示一串字:js脚本生效!
我们执行这个HTML文件后发现一片空白
说明JS并没有产生预期效果, 因为浏览器解析到<script>元素时会停止继续解析, 开始下载js脚本文件并执行,
但问题是这时候浏览器没解析到div部分并不知道这个id是target的东西是啥 , 所以js执行了但没成功获取元素,修改失败了
怎么解决呢?
- 把<script>放在<body>后,这样最后在执行js就可以了
- 给<script>加上defer属性如下:
<script type="text/javascript" src="defer.js" defer>
再刷新就能正常显示了:
为什么呢?
因为defer属性会告诉浏览器页面载入之后解析完才会执行<script.../>脚本中的内容,
还有一个要点:
就这两行js我干嘛非写成外部脚本文件?
因为defer属性只对外部脚本文件起作用!