博客

原生的js获取元素节点通常返回的都是单个element对象或者一个元素集合，之所以叫集合，是因为，它不是数组，但是和数组有类似的性质。

这种元素集合，有两种形式，一种是只包含元素的

HTMLcollection元素收集器

，另一种是包含文本节点的

Nodelist节点列表。

HTMLcollection是动态的，即一但文档结构发生了改变，HTMLcollection就会立即更新，使用的时候千万要注意。

nodelist一般情况下也是动态，而querySelectAll返回的是静态的nodelist。

有如下HTML结构：

<div class="a"></div>
<div class="a"></div>
<input type="button" value="更改" id="b">

执行修改classname操作：

var b=document.getElementById("b")
b.onclick=function(){
    var a=document.getElementsByClassName("a");
    for (let index = 0; index < a.length; index++) {
        a[index].className="c"                                        
     }
}

看似可以修改两个class，实际上，点击一次只能修改一个。就是因为a变量是一个元素收集器，它是动态的，第二次遍历时，a变量已经发生了改变，a.length也变了，循环就停止了。

解决方法是，将元素收集器或者nodelist转换为数组，通过复制数组，来转换为静态。再或者，用querySelectAll。再再或者，优化函数，考虑到动态就可以了。