NodeList与HTMLCollection
2018-08-14 本文已影响0人
jackie季
NodeList与HTMLCollection都是DOM获取节点的集合时所返回的对象，它们存在着一些相同点和不同点：
相同点：
- 都是类数组
- 都有length属性
- 都有item()方法，可以传入索引值取得元素
不同点：
- NodeList节点的集合不仅包括元素节点，还包括文本节点、注释节点等其它节点；HTMLCollection只包括元素节点
- HTMLCollection还有一个namedItem()方法，可以返回集合中name属性和id属性值的元素
详解：
NodeList
- NodeList对象是由childNodes属性、querySelectorAll方法返回的一组节点的集合，它保存着一组有序的节点。需要注意的是，由childNodes返回的NodeList对象是一个动态的集合，对DOM操作所引起的变化会实时地反应在这个集合中（例如length属性的变化）；而querySelectorAll返回的NodeList对象是一个静态集合，对DOM操作后并不会反映在此对象上（length不变）
- Element继承自Node，是Node的一种，在HTML中，它一般是HTML元素（比如<p>之类的标签创建出来的对象）。而Node作为父类，除了Element还有一些其他子类，比如HTML元素内的文本对应的Text，文档对应的Document，注释对应的Comment。HTMLCollection里，只有Element，而NodeList里可以有Element、Text、Comment等多种元素
- NodeList对象有个length属性和item()方法，length表示所获得的NodeList对象的节点个数，这里还是要强调的是节点，而item()可以传入一个索引来访问Nodelist中相应索引的元素
1 <body>
2 <div id="node">
3 文本节点
4 <!-- 注释节点 -->
5 <span>node1</span>
6 <span>node2</span>
7 <span>node3</span>
8 </div>
9 </body>
10 <script>
11 var node = document.getElementById('node'),
12 nodeLists = node.childNodes
13 console.log(nodeLists.length) // 输出为9
14 </script>
上面的HTML代码中，“文本节点”和父节点子节点的空格（连着的文本）算做一个文本节点，然后是一个注释节点和注释节点和元素节点之间的空格（换行会产生空格，空格算做文本节点）的文本节点，紧接着的是一个元素节点和元素节点之间的换行的文本节点，三个元素节点和元素节点间的两个文本节点，最后是最后得元素节点和父元素之间的空格产生的文本节点，总共是9个节点。
HTMLCollection
- HTMLCollection对象是一个动态的集合，一般通过getElementsByTagName、getElementsByClassName等方法返回
- HTMLCollection是元素节点的集合，不存在其它节点
- HTMLCollection和NodeList很像，有length属性来表示HTMLCollection对象的长度，也可以通过elements.item()传入元素索引来访问。HTMLCollection还有一个namedItem方法，可以快速获取其中元素
<div>
<!-- Comment -->
<p>This is Some Text</p>
<img name="test" src="test.jpg">
</div>
那么假设得到了这个div的子元素构成的HTMLCollection，叫做list，那么使用list.namedItem("test")就可以直接得到里面的img元素。
