主要不同在于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>```
网友评论