節(jié)點都是單個對象，有時需要一種數據結構，能夠容納多個節(jié)點。DOM 提供兩種節(jié)點集合，用于容納多個節(jié)點：NodeList和HTMLCollection。

這兩種集合都屬于接口規(guī)范。許多 DOM 屬性和方法，返回的結果是NodeList實例或HTMLCollection實例。主要區(qū)別是，NodeList可以包含各種類型的節(jié)點，HTMLCollection只能包含 HTML 元素節(jié)點。

NodeList 接口

概述

NodeList實例是一個類似數組的對象，它的成員是節(jié)點對象。通過以下方法可以得到NodeList實例。

• ?Node.childNodes?
• ?document.querySelectorAll()?等節(jié)點搜索方法

document.body.childNodes instanceof NodeList // true

NodeList實例很像數組，可以使用length屬性和forEach方法。但是，它不是數組，不能使用pop或push之類數組特有的方法。

var children = document.body.childNodes;

Array.isArray(children) // false

children.length // 34
children.forEach(console.log)

上面代碼中，NodeList 實例children不是數組，但是具有length屬性和forEach方法。

如果NodeList實例要使用數組方法，可以將其轉為真正的數組。

var children = document.body.childNodes;
var nodeArr = Array.prototype.slice.call(children);

除了使用forEach方法遍歷 NodeList 實例，還可以使用for循環(huán)。

var children = document.body.childNodes;

for (var i = 0; i < children.length; i++) {
  var item = children[i];
}

注意，NodeList 實例可能是動態(tài)集合，也可能是靜態(tài)集合。所謂動態(tài)集合就是一個活的集合，DOM 刪除或新增一個相關節(jié)點，都會立刻反映在 NodeList 實例。目前，只有Node.childNodes返回的是一個動態(tài)集合，其他的 NodeList 都是靜態(tài)集合。

var children = document.body.childNodes;
children.length // 18
document.body.appendChild(document.createElement('p'));
children.length // 19

上面代碼中，文檔增加一個子節(jié)點，NodeList 實例children的length屬性就增加了1。

NodeList.prototype.length

length屬性返回 NodeList 實例包含的節(jié)點數量。

document.querySelectorAll('xxx').length
// 0

上面代碼中，document.querySelectorAll返回一個 NodeList 集合。對于那些不存在的 HTML 標簽，length屬性返回0。

NodeList.prototype.forEach()

forEach方法用于遍歷 NodeList 的所有成員。它接受一個回調函數作為參數，每一輪遍歷就執(zhí)行一次這個回調函數，用法與數組實例的forEach方法完全一致。

var children = document.body.childNodes;
children.forEach(function f(item, i, list) {
  // ...
}, this);

上面代碼中，回調函數f的三個參數依次是當前成員、位置和當前 NodeList 實例。forEach方法的第二個參數，用于綁定回調函數內部的this，該參數可省略。

NodeList.prototype.item()

item方法接受一個整數值作為參數，表示成員的位置，返回該位置上的成員。

document.body.childNodes.item(0)

上面代碼中，item(0)返回第一個成員。

如果參數值大于實際長度，或者索引不合法（比如負數），item方法返回null。如果省略參數，item方法會報錯。

所有類似數組的對象，都可以使用方括號運算符取出成員。一般情況下，都是使用方括號運算符，而不使用item方法。

document.body.childNodes[0]

NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries()

這三個方法都返回一個 ES6 的遍歷器對象，可以通過for...of循環(huán)遍歷獲取每一個成員的信息。區(qū)別在于，keys()返回鍵名的遍歷器，values()返回鍵值的遍歷器，entries()返回的遍歷器同時包含鍵名和鍵值的信息。

var children = document.body.childNodes;

for (var key of children.keys()) {
  console.log(key);
}
// 0
// 1
// 2
// ...

for (var value of children.values()) {
  console.log(value);
}
// #text
// <script>
// ...

for (var entry of children.entries()) {
  console.log(entry);
}
// Array [ 0, #text ]
// Array [ 1, <script> ]
// ...

HTMLCollection 接口

概述

HTMLCollection是一個節(jié)點對象的集合，只能包含元素節(jié)點（element），不能包含其他類型的節(jié)點。它的返回值是一個類似數組的對象，但是與NodeList接口不同，HTMLCollection沒有forEach方法，只能使用for循環(huán)遍歷。

返回HTMLCollection實例的，主要是一些Document對象的集合屬性，比如document.links、document.forms、document.images等。

document.links instanceof HTMLCollection // true

HTMLCollection實例都是動態(tài)集合，節(jié)點的變化會實時反映在集合中。

如果元素節(jié)點有id或name屬性，那么HTMLCollection實例上面，可以使用id屬性或name屬性引用該節(jié)點元素。如果沒有對應的節(jié)點，則返回null。

// HTML 代碼如下
// <img id="pic" src="http://example.com/foo.jpg" rel="external nofollow"  rel="external nofollow" >

var pic = document.getElementById('pic');
document.images.pic === pic // true

上面代碼中，document.images是一個HTMLCollection實例，可以通過<img>元素的id屬性值，從HTMLCollection實例上取到這個元素。

HTMLCollection.prototype.length

length屬性返回HTMLCollection實例包含的成員數量。

document.links.length // 18

HTMLCollection.prototype.item()

item方法接受一個整數值作為參數，表示成員的位置，返回該位置上的成員。

var c = document.images;
var img0 = c.item(0);

上面代碼中，item(0)表示返回0號位置的成員。由于方括號運算符也具有同樣作用，而且使用更方便，所以一般情況下，總是使用方括號運算符。

如果參數值超出成員數量或者不合法（比如小于0），那么item方法返回null。

HTMLCollection.prototype.namedItem()

namedItem方法的參數是一個字符串，表示id屬性或name屬性的值，返回當前集合中對應的元素節(jié)點。如果沒有對應的節(jié)點，則返回null。

// HTML 代碼如下
// <img id="pic" src="http://example.com/foo.jpg" rel="external nofollow"  rel="external nofollow" >

var pic = document.getElementById('pic');
document.images.namedItem('pic') === pic // true

Collection.namedItem('value')等同于Collection['value']。