HTMLCollection和NodeList最主要的区别是，一个是动态的，一个是静态的。这表示，当一个元素append到一个DOM的时候，动态的会插入最新的元素而静态的插入的是之前获取的元素。
1. HTMLCollection
元素方法getElementsByClassName() getElementsByTagName()都返回动态的HTMLCollection。只返回匹配的元素节点并不包含文本节点，并只提供两个方法item(index) namedItem(id or name)。
下面例子展示了，所有的class是fruits的被过滤出来，并用在item()方法中传出index=0下标，筛选出一个元素，并给它添加fruit_01的class。
const fruits = document.getElementsByClassName(‘fruits’);
fruits.item(0).classList.add(‘fruit__01’)
2. NodeList
元素方法querySelectorAll()返回静态NodeList。是一个类数组结构。NodeList包含forEach,item, entrues,keys,values方法。
NodeList返回的Nodes是什么状态，取决于使用方式：
动态：使用childNodes()获取Nodes———后添加到DOM中的节点都会更新获取
静态：使用querySelectorAll()获取Nodes——不会更新
// returns static collection
const fruits = document.querySelectorAll(‘.fruits’);
// returns live collection
const fruits = document.querySelector(‘.fruits’);
const childFruit = fruits.childNodes;