今天写东西练手的时候发现,使用getElementByClassName的时候,如果对元素的ClassName进行修改,那么数组的长度会发生变化。废话不说先看代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
height: 100%;
width: 100%;
}
.nav-list{
position: absolute;
top:0px;
left:0px;
width: 200px;
height:100%;
background: rgb(85, 85, 97);
}
.nav-list .nav-title {
text-align: center;
background:rgb(21, 21, 31);
color: white;
margin:0px;
padding:7px;
}
.nav-list ul{
padding:0px;
margin:0px;
}
.nav-list ul li{
list-style-type: none;
}
.nav-list ul li h3{
color:white;
margin:2px;
background:rgb(139, 173, 211);
text-align:center;
padding:6px;
}
.hide{
margin:0px;
transition: 1s;
display: none;
}
.on{
margin:0px;
transition: 1s;
}
.nav-list ul li h5{
text-align: center;
color: white;
display: block;
margin:2px;
background:rgb(128, 141, 214);
padding:5px;
}
</style>
</head>
<body>
<div class="nav-list">
<h3 class="nav-title">Title</h3>
<ul>
<li>
<h3 class="subtitle">subtitle</h3>
<div class="hide">
<h5>1</h5>
<h5>1</h5>
<h5>1</h5>
<h5>1</h5>
</div>
</li>
<li>
<h3 class="subtitle" >subtitle</h3>
<div class="hide">
<h5>1</h5>
<h5>2</h5>
<h5>3</h5>
<h5>4</h5>
<h5>5</h5>
</div>
</li>
</ul>
</div>
<script>
let subtitle=document.querySelectorAll(".subtitle");
for(let i=0;i<subtitle.length;i++)
{
subtitle[i].index=i;
}
let obj=[];
let hide=document.getElementsByClassName("hide");
for(let i=0;i<hide.length;i++)
{
obj[i]=hide[i];
hide[i].index=i;
};
//利用闭包实现的绑定
// for(var i=0;i<subtitle.length;i++)
// {
// (function(n){
// subtitle[n].onclick=function(){
// alert(n);
// }
// })(i);
// }
//利用块级作用域实现的半丁
alert(hide.length);
for(let i=0;i<subtitle.length;i++)
{
subtitle[i].onclick=function()
{
hide[i].className="on";
alert("当前数组长度"+hide.length);
}
}
</script>
</body>
</html>
具体情况就不说了,大致就是侧边栏有两个按钮,点击时绑定了事件,对应隐藏的部分会修改类名进行显示同时提示当前使用getElementByClassName获得的数组长度。
后经查询得知使用querySelectAll得到的是静态元素集合,而使用其他方法得到的则是动态的NodeList,是会随着元素变化而发生删减的。
后经过测试最后得到确认上述的结论是正确的。