HTMLCollection对象和NodeList对象

前言

首先我们先来看下面的demo，假如我们需要给所有的li字体变一个颜色。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul id="list">
		<li>aaaaaaa</li>
		<li>aaaaaaa</li>
		<li>aaaaaaa</li>
		<li>aaaaaaa</li>
	</ul>
</body>
</html>

下面我们将通过两种方式来实现需求。

childNodes

首先我们先来通过childNodes来获取li。

var list = document.getElementById('list');
var lis = list.childNodes;
console.log(lis);

此时需要注意的是，通过childNodes获取的list里面的子节点，数量远远超过了li的数量，原因是在js当中，节点的分类当中不仅仅包括了标签，连同文本、注释等等都会被包括在内。所以当我们获取内容时，连同li之外的节点也找到了。

下面是js当中节点的常见分类：

那么此时如果我们直接给li设置color属性就会直接报错：

	for(var i=0;i<lis.length;i++) {
		lis[i].style.color = 'red'
	}

错误如下：

HTMLCollection 和 NodeList.html:21 Uncaught TypeError: Cannot set property 'color' of undefined

如果想要设置样式，需要在代码中判断一下节点的类型：

for(var i=0;i<lis.length;i++) {
		if(lis[i].nodeType === 1) {
			lis[i].style.color = 'red'
		}
	}

通过nodeType判断节点类型是否是一个元素，如果是再来设置样式。

children

其实我们还可以采用更简单的形式来进行需求的实现：

var list = document.getElementById('list');
var lis = list.children;
for(var i=0;i<lis.length;i++){
  lis[i].style.color = 'red'
}

在上面的代码中，我们将childNodes换成了children,这样我们直接获取了list当中所有的li，并且仅仅获取了li。

这样我们直接在循环中完成了样式的设置。

相对于上面的写法，我们会发现简单了不少。

HTMLCollection 和 NodeList

细心的同学应该会发现一个小问题，就是当我们使用nodeList和children获取所有的li后，打印出来的对象并不一样。

这是通过nodeList打印出来的结果：

下面这是通过children打印出来的结果：

你会发现二者一个是nodeList对象，一个是HTMLCollection对象。

下面我们来聊聊这两个对象。

首先，当我们获取元素时，如果通过下面的api获取元素就可以获得一个HTMLCollection对象:

1：getElementsByTagName() 
2：document.forms.item()
3: document.forms.namedItem()

而如果通过下面的方式将会获得一个NodeList对象:

childNodes
querySelectorAll()
getElementsByClassName()[一些旧版本的浏览器也返回NodeList对象]

如果仅仅从表面看，这两个对象其实非常相似，都是类数组对象，但是二者却有着一个最大的区别：一个是元素集合(HTMLCollection)一个是节点集合(NodeList)。

在元素集合当中仅仅包括元素标签，而节点集合还可能包括其他类型的节点。

二者之间在使用上还有一点区别，在HTMLCollection中除了可以使用索引获取元素以外，还可以使用name、id来获取元素。而NodeList仅仅可以通过索引来获取元素。

当然，这两个对象也存在一些相同的地方：

二者都是类数组对象，具有length属性，但是却不能够使用数组的方法

二者都可以通过类似数组的方式，使用索引获取元素。

Tip： HTMLCollection可以理解为是NodeList的子对象，后者包括前者，前者是继承自后者。

动态集合

HTMLCollection和NodeList都是动态集合，例如下面的例子:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul id="list"></ul>
</body>
<script type="text/javascript">
	var list = document.getElementById('list');
	console.log(list)
	var li = document.createElement('li');
	list.appendChild(li);
	console.log(list)
</script>
</html>

虽然在插入节点之前console了结果，但是依然是最新的插入节点之后的结果:

querySelectorAll

需要注意的是，虽然querySelectAll也会产生一个NodeList对象，但是却是NodeStaticList，是一个静态集合，这一点较为特殊，并不是一个实时的对象，需要额外的注意。