HTML元素擷取中的靜态和動态

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