原生的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。再再或者，優化函式，考慮到動態就可以了。