深挖querySelectorAll 和 getElementsByClassName的区别（涉及到HtmlCollection 和 NodeList）

区别：不想深究为什么的可以看到这里就结束了；
1.getElemengByXXXX 不能使用 foreach, 但是querySelectorAll可以；
2.querySelectorAll返回NodeList; 而NodeList 是一个静态集合；(文档中的节点树 发生变化时除外)
getElemengByXXXX 返回 HTMLCollection 是一直实时更新的；

代码如下：

根本原因在于querySelectAll 返回的是nodeList,是个节点的集合，是个类数组。
一般类数组有item方法，没有foreach方法的！！！但是，nodeList继承了forEach方法
还有.prototype.keys() ; .prototype.values() 等方法。使nodeList这个类数组更像一个数组。 感兴趣的自行去MDN查

而getElementByXX 返回的是HTMLCollection ；是元素的集合。HTMLCollection 对象类似一个包含 HTML 元素的数组列表。
HTMLCollection只有 item、namedItem方法；

顺带一提： getElementByXXX 可以使用 for of ，for of 可以便利类数组；
可以引申出 forEach ; for… in ; for… of 的区别；