共计 699 个字符，预计需要花费 2 分钟才能阅读完成。
在写一个小组建的时候用到了 document.querySelector，被小伙伴提醒说这个可能有坑，是啥呢？先来一篇 MDN 的文档解解馋：戳我戳我戳我 >>>>>>>NodeList
翻译一下主要部分：
对于现代浏览器来说，虽然 NodeList 不是 Array，但是它是可枚举的，因而它可以直接使用 forEach 等方法；
对于一些老版本的浏览器，可以使用 Array.from 或者 Array.prototype.forEach 来转换 NodeList 为数组，继而使用 forEach 等方法；
在有些情况下，NodeList 是 live(实时变化的)，但有些时候不是。“ 比如，使用 document.getElementById，获取该元素的 childNodes，那么这个集合是 live 的。但是，用 document.querySelectorAll() 获取到的集合却不是 live 的。这个 live 具体指什么呢？意思是，如果你事先获取到一个集合，保存在一个变量 A 上。在对这个集合进行增删改等操作，如果变量 A 能够实时反应你的增删改操作，说明集合是 live 的，反之则不是。“
这个「坑」就在于，文档也没有能够说明清楚，在用 querySelector 后，具体什么时候 NodeList 是 live，什么时候 NodeList 不是 live。
于是小伙们做起了实验，大致发现，如果对节点进行删除，那么是 live；如果新增节点则不是 live。
朋友们也可以自己做做实验。如果有新发现欢迎评论留言～
另一个值得注意的是：关于 HTMLCollection 和 NodeList。从 MDN 的文档上笼统来说，所有集合都可以叫做 NodeList，不过需要注意如下：
