小心，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，不过需要注意如下： image.png