原生与html的区别,原生javaScript中NodeList和HTMLCollection的区别

主要不同在于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的有序集合

.......

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

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

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

alert(length);

**for**(**var**i=0;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

parent.removeChild(childrens[0]);

}

```