當心，querySelector前方10米有坑

在寫一個小組建的時候用到了document.querySelector，被小夥伴提醒說這個可能有坑，是啥呢？
先來一篇MDN的文檔解解饞：戳我戳我戳我>>>>>>>NodeList

翻譯一下主要部分：

1. 對於現代瀏覽器來講，雖然NodeList不是Array，可是它是可枚舉的，於是它能夠直接使用forEach等方法；
2. 對於一些老版本的瀏覽器，可使用Array.from或者Array.prototype.forEach來轉換NodeList爲數組，繼而使用forEach等方法；
3. 在有些狀況下，NodeList是live(實時變化的)，但有些時候不是。

   ``
   好比，使用document.getElementById，獲取該元素的childNodes，那麼這個集合是live的。
   可是，用document.querySelectorAll()獲取到的集合卻不是live的。
   這個live具體指什麼呢？意思是，若是你事先獲取到一個集合，保存在一個變量A上。在對這個集合進行增刪改等操做，若是變量A可以實時反應你的增刪改操做，說明集合是live的，反之則不是。
   ``

這個「坑」就在於，文檔也沒有可以說明清楚，在用querySelector後，具體何時NodeList是live，何時NodeList不是live。

因而小夥們作起了實驗，大體發現，若是對節點進行刪除，那麼是live；若是新增節點則不是live。

朋友們也能夠本身作作實驗。若是有新發現歡迎評論留言～

另外一個值得注意的是：關於HTMLCollection和NodeList。
從MDN的文檔上籠統來講，全部集合均可以叫作NodeList，不過須要注意以下：