今天遇到的一个比较基础的问题,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script >
var a=document.getElementsByClassName("a");
console.log(a.item(0));
</script>
</head>
<body>
<div class="a">1</div>
<div class="a"></div>
<div class="a"></div>
</body>
</html>
乍一看好像没什么问题,获取到样式名为“a”的节点并在控制台输出第一个,按道理来说它应该输出第一个div的信息,但是
输出的是null,这是为什么呢?其实很简单,这是因为HTML中的dom树还没建起来,JS代码就加载了,此时页面上还是空的,所以返回了null。
解决办法:
使用延迟脚本,让JS在HTML执行完后再执行
方式一:使用window.onload
<script >
window.onload=function(){
var a=document.getElementsByClassName("a");
console.log(a.item(0));
}
</script>
方式二:使用defer属性
<script src="test.js" defer="defer"></script>
(因为defer只对外部脚本有用)