原文地址：https://wangdoc.com/javascript/
節點都是單個物件，有時需要一種資料結構，能夠容納多個節點。DOM提供兩種節點集合，用於容納多個節點：NodeList和HTMLCollection。
這兩種集合都屬於介面規範。許多DOM屬性和方法，返回的結果是NodeList例項或HTMLCollection例項。主要區別是，NodeList可以包含各種型別的節點，HTMLCollection只能包含HTML元素節點。

NodeList介面

概述

NodeList例項是一個類似陣列的物件，它的成員是節點物件。通過以下方法可以得到NodeList例項。

• Node.childNodes
• document.querySelectorAll等節點搜尋方法
  NodeList例項很像陣列，可以使用length屬性和forEach方法。但是，它不是陣列，不能使用pop或push之類陣列特有的方法。

var children = document.body.childNodes;

Array.isArray(children); // false

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

如果NodeList例項要使用陣列方法，可以將其轉為真正的陣列。

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

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

NodeList.prototype.length

length屬性返回NodeList例項包含的節點數量。

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

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

NodeList.prototype.forEach()

forEach方法遍歷NodeList的所有成員。它接受一個回撥函式作為引數，每一輪遍歷就執行一次回撥函式。用法與陣列例項的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方法。

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

這三個方法都返回一個ES6的遍歷器物件，可以通過for...of迴圈遍歷獲取每一個成員的資訊。區別在於，keys()返回鍵名的遍歷器，values()返回鍵值的遍歷器，entries()返回的遍歷器包含鍵名和鍵值的資訊。

var children = document.body.childNodes;
for (var key of children.keys()) { // for ... of
    console.log(key);
}

HTMLCollection介面

概述

HTMLCollection是一個節點物件的集合，只能包含元素節點（element），不能包含其他型別的節點。它的返回值是一個類似陣列的物件，但是與NodeList介面不同，HTMLCollection沒有forEach方法，只能使用for迴圈遍歷。
返回HTMLCollection例項的，主要是一些Document物件的集合屬性，比如document.links、document.forms、document.images等。

document.links instanceof HTMLCollection // true

HTMLCollection例項都是動態集合，節點的變化會實時反映在集合中。
如果元素節點有id或name屬性，那麼HTMLCollection例項上面，可以使用id屬性或name屬性引用該節點元素。如果沒有對應的節點，則返回null。

// HTML 程式碼如下
// <img id="pic" src="...">

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

HTMLCollection.prototype.length

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

document.links.length // 18

HTMLCollection.prototype.item()

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

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

由於方括號運算子也具有同樣作用，而且使用更方便，所以一般情況下，總是使用方括號運算子。
如果引數值超出成員數量或者不合法，那麼item方法返回null。

HTMLCollection.prototype.namedItem()

namedItem方法的引數是一個字串，表示id屬性或name屬性的值，返回對應的元素節點。沒有對應元素節點返回null。

// HTML 程式碼如下
// <img id="pic" src="...">

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