javascript - getElementsByTagName不是动态获取元素的吗，为什么这个还会动？
本文介绍了javascript - getElementsByTagName不是动态获取元素的吗，为什么这个还会动？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
想尝试做个轮播图下面的那种随着图片变化的点，感觉用动态获取会方便一些，但是做出来的效果好像是静态获取的了，点击第一个方块，console它的索引值一直是在变的，动态获取的话第一个不应该一直是0的吗？
http://runjs.cn/detail/cuxxtwzd
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p span{
display:inline-block;
width:10px;
height:10px;
margin:0 6px;
background:red;
}
</style>
</head>
<body>
<p></p>
<script>
var p=document.querySelector('p');
for(var i=0;i<8;i++){
p.innerHTML+='<span></span>';
}
var spans=p.getElementsByTagName('span');
spans[0].style.background='green';
setInterval(function(){
p.insertBefore(spans[spans.length-1],spans[0]);
},500);
for(var i=0;i<spans.length;i++){
spans[i].index=i；
spans[i].onclick=function(){
console.log(this.index);
}
}
</script>
</body>
</html>解决方案
正是因为动态的所以会变啊。
因为setInterval函数里所做的操作，就是每半秒把spans中最后一个元素移动到第一个元素前面，由于spans是动态的，所以才正好每次都是把显示出来的最后一个元素放到第一个元素的前面。
一开始是各元素的index分别是 0 1 2 3 4 5 6 7
第一次是把span[7]（index=7）放到span[0]前面（index=0）结果为 7 0 1 2 3 4 5 6
第二次是把span[7]（index=6）放到span[0]前面（index=7）结果为 6 7 0 1 2 3 4 5
第三次是把span[7]（index=5）放到span[0]前面（index=6）结果为 5 6 7 0 1 2 3 4
以此类推。
这篇关于javascript - getElementsByTagName不是动态获取元素的吗，为什么这个还会动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
