当心，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，不过须要注意以下：