js代码位置问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript">
console.log(document.getElementsByClassName("nav-item"));
</script>
<!-- <script src="js/js.js"></script> -->
</head>
<body>
<div class="main">
<!-- 导航 -->
<div class="nav" id="nav">
<div class="nav-item actived">
<a href="javascript:void(0)">
<span>首页</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>点击看看</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>会自动的</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>我的网站</span>
</a>
</div>
</div>
<!-- 轮播图 -->
<div class="slide-pics" id="pics">
<div class="pic-item actived">
<img src="img/1.jpg" alt="">
</div>
<div class="pic-item">
<img src="img/2.jpg" alt="">
</div>
<div class="pic-item">
<img src="img/3.jpg" alt="">
</div>
<div class="pic-item">
<img src="img/4.jpg" alt="">
</div>
</div>
</div>
</body>
</html>

之前onload那节课不是说这样会报错吗？为什么我这边能取出元素？

慕容124385 2018-09-20

源自：项目：JS实现轮播特效 6-2 作业题

收起

3回答

妮可妮可妮_ 回答被采纳获得+3积分 2018-09-20 15:31:18

document.getElementsByClassName("")返回的是一个引用类型,指向的是一个地址,所以浏览器是可以显示出来的,

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript">
console.log(document.getElementsByClassName("nav-item")[0]);
</script>
<!-- <script src="js/js.js"></script> -->
</head>

<body>
<div class="main">
<!-- 导航 -->
<div class="nav" id="nav">
<div class="nav-item actived">
<a href="javascript:void(0)">
<span>首页</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>点击看看</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>会自动的</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>我的网站</span>
</a>
</div>
</div>
<!-- 轮播图 -->
<div class="slide-pics" id="pics">
<div class="pic-item actived">
<img src="img/1.jpg" alt="">
</div>
<div class="pic-item">
<img src="img/2.jpg" alt="">
</div>
<div class="pic-item">
<img src="img/3.jpg" alt="">
</div>
<div class="pic-item">
<img src="img/4.jpg" alt="">
</div>
</div>
</div>
</body>

</html>

同学可以将代码替换为console.log(document.getElementsByClassName("nav-item")[0]);进行测试哦~

祝学习愉快!

收起回答

妮可妮可妮_ 2018-09-20 14:44:18

放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取。举个栗子:如果我们想定义一个全局对象，而这个对象是页面中的某个按钮时，如果放入head，那当你定义的时候，那个按钮都没有被加载，可能获得的是一个undefind。

而onload 事件会在页面或图像加载完成后立即发生。保证了所有js内容都是在页面或图像加载完成后发生的

收起回答

提问者慕容124385 #1

上面我能理解，可是代码中，js是写在head中的，那为什么还是能找到类为nav-item的元素？

2018-09-20 14:56:40
提问者慕容124385 #2

明白了，其实还是没找到类为nav-item的元素的，它返回的是空数组。之所以我能看到，是因为console.log的奇怪表现，当我打开数组时，里面的值是重新计算出来的。

2018-09-20 15:29:35