HTMLCollection和NodeList

HTMLCollection是元素集合（元素顺序为文档流中的顺序），它和NodeList很像，有length属性来表示HTMLCollection对象的长度，可以通过 item() 传入数字索引来访问单个元素（也可通过方括号[ ]的方式）。当时它还有一个 nameItem() 方法，可以返回集合中指定 name 属性值 或 id 属性值的元素。
HTMLCollection是即时更新的，当其所包含的文档结构发生改变时，它会自动更新。
可以通过以下方法获取HTMLCollection对象
（1）getElementsByTagName()
（2）getElementsByClassName()
（3）document.forms.item()
（4）document.forms.namedItem()

下面的每个项目（以及它们指定的属性）都返回HTMLCollection：
Document (images, applets, links, forms, anchors)
form (elements)
map (areas)
select (options)
table (rows, tBodies)
tableSection (rows)
row (cells)
HTMLCollection 对象类似 HTML 元素的一个数组,获取的是html元素集合。

NodeList对象是一个从文档中获取的节点列表 (集合) 。所有浏览器中调用 childNodes 属性返回的是 NodeList 对象。大部分浏览器的 querySelectorAll() 返回 NodeList 对象。NodeList对象有个length属性和item()方法，length表示所获得的NodeList对象的节点个数，这里还是要强调的是节点，而item()可以传入一个索引来访问Nodelist中相应索引的元素。
NodeList是一个节点的集合(可以包含元素和其他节点)。

注意：
(1)childNodes 是实时的，即如果 文档中的节点树发生变化，已经存在的对应 childNodes也会随之变化。如下段代码所示。

let parent = document.getElementById('parent');
let child_nodes = parent.childNodes;
console.log(child_nodes.length); // 假设结果是“2”
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // 此时的输出是“3”

(2)在其他情况下，NodeList 是一个静态集合，也就意味着随后对 dom 的任何改动都不会影响集合的内容。比如document.querySelectorAll 就会返回一个静态的 NodeList。

总体例子

<div class='target'>
    <!-- 666 -->
    <span id="span1">item1</span>
    <span name="span2">item2</span>
    <span >item3</span>
</div>

div dom内部属性
对于以上dom结构，div 的 childNodes 就是 NodeList 对象。如上图所示，注意其中有9个节点，分别是div与注释节点的空白文本节点，注释节点，注释节点和<span>之间的空白文本节点，然后依次类推，直到最后一个span与div的空白文本节点。而对于 childElementCount，其值为4，是因为不算空白文本节点。

 let log=console.log;
    let divs=document.getElementsByTagName('div');// HTMLCollection
    let spans=document.getElementsByTagName('span');
    let target=document.getElementsByClassName('target');

    let spans2=document.querySelectorAll('span');//NodeList
    let span3=document.querySelector('span');

    log(divs);
    log(divs.item(0))
    log(divs.namedItem('span1'));// null
    log(spans.length);
    log(spans.namedItem('span2'));
    log(target);

    log(spans2)
    log(spans2.length);
    log(spans2.item(0));
    log(span3)

    divs[0].appendChild(document.createElement('span'));
    log(spans.length);//4
    log(spans2.length);//3

HTMLColection 与 NodeList 的区别：
（1）HTMLCollection 是 HTML 元素的集合；NodeList 是一个文档节点的集合。
（2）HTMLCollection 元素可以通过 name，id 或索引来获取；NodeList 只能通过索引来获取。
（3）NodeList内部还有 entries、forEach、keys 等方法。

HTMLColection 与 NodeList内部属性

HTMLColection 与 NodeList 的相同点：
都是类数组，即具有 length 属性和数字索引。