原生javaScript中NodeList和HTMLCollec

主要不同在于HTMLCollection是元素集合而NodeList是节点集合（即可以包含元素，也可以包含文本节点）。
NodeList跟HTMLCollection有个差异是前者没有namedItem()方法后者是有的。
NodeList的元素是Node,HTMLCollection的元素是Element，Element继承自Node，是Node的一种，在HTML中，它一般是HTML元素（比如p，a之类的标签创建出来的对象）。而Node作为父类，除了Element还有一些其他子类，比如HTML元素内的文本对应的Text，文档对应的Document，注释对应的Comment。
HTMLCollection里，只有Element，而NodeList里可以有Element、Text、Comment等多种元素。按说如果获取元素返回的列表里只有Element，那这两种类没多大区别，但事实上很多时候浏览器会将解析HTML文本时得到的Text和Comment一并放进列表里放回。
所以 node.childNodes 返回NodeList，而 node.children 和node.getElementsByXXX 返回 HTMLCollection ，只有document.getElementsByName返回的还是NodeList对象，还有另一个比较特殊的是querySelectorAll 返回的虽然是 NodeList ，但是实际上是元素集合，并且是静态的（其他接口返回的HTMLCollection和NodeList都是live的）。
在chrome上node.getElementByTagName("")得到的是HTMLCollection[
]是live的；而node.querySlectorAll("")得到的是NodeList[
]，注意： querySelectorAll 返回的虽然是NodeList ，但是实际上是元素集合，集合长度可以看出来（不包含空格text节点，不包含注释节点），并且是静态的（其他接口返回的HTMLCollection和NodeList都是live的）是static的

// 在chrome上
//使用querySelectorAll时，移除子节点使用removeChild(childrens[i]);是static的有序集合
<div id ="div">
<p></p>
<p></p>
.......
<p></p>
<p></p>
</div>
<script>
**var**parent=**document**.querySelector(**"#div"**);

**var**childrens=parent.querySelectorAll(**"p"**);

**var**length=childrens.**length**;

alert(length);

**for**(**var**i=0;i<length;i++){

parent.removeChild(childrens[i]);

}

//使用getElementByTagName时，移除子节点使用removeChild(childrens[0]);是live的有序集合

**var**parent=**document**.querySelector(**"#div"**);

**var**childrens=parent.getElementByTagName(**"p"**);

**var**length=childrens.**length**;

alert(length);

**for**(**var**i=0;i<length;i++){

parent.removeChild(childrens[0]);

}
</script>```