JavaScript NodeList 接口，HTMLCollection 接口

節(jié)點(diǎn)都是單個(gè)對(duì)象，有時(shí)需要一種數(shù)據(jù)結(jié)構(gòu)，能夠容納多個(gè)節(jié)點(diǎn)。DOM 提供兩種節(jié)點(diǎn)集合，用于容納多個(gè)節(jié)點(diǎn)：NodeList和HTMLCollection。

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

NodeList 接口

概述

NodeList實(shí)例是一個(gè)類似數(shù)組的對(duì)象，它的成員是節(jié)點(diǎn)對(duì)象。通過以下方法可以得到NodeList實(shí)例。

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

document.body.childNodes instanceof NodeList // true

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

var children = document.body.childNodes;

Array.isArray(children) // false

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

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

如果NodeList實(shí)例要使用數(shù)組方法，可以將其轉(zhuǎn)為真正的數(shù)組。

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

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

var children = document.body.childNodes;

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

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

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

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

NodeList.prototype.length

length屬性返回 NodeList 實(shí)例包含的節(jié)點(diǎn)數(shù)量。

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

上面代碼中，document.querySelectorAll返回一個(gè) NodeList 集合。對(duì)于那些不存在的 HTML 標(biāo)簽，length屬性返回0。

NodeList.prototype.forEach()

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

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

上面代碼中，回調(diào)函數(shù)f的三個(gè)參數(shù)依次是當(dāng)前成員、位置和當(dāng)前 NodeList 實(shí)例。forEach方法的第二個(gè)參數(shù)，用于綁定回調(diào)函數(shù)內(nèi)部的this，該參數(shù)可省略。

NodeList.prototype.item()

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

document.body.childNodes.item(0)

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

如果參數(shù)值大于實(shí)際長度，或者索引不合法（比如負(fù)數(shù)），item方法返回null。如果省略參數(shù)，item方法會(huì)報(bào)錯(cuò)。

所有類似數(shù)組的對(duì)象，都可以使用方括號(hào)運(yùn)算符取出成員。一般情況下，都是使用方括號(hào)運(yùn)算符，而不使用item方法。

document.body.childNodes[0]

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

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

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是一個(gè)節(jié)點(diǎn)對(duì)象的集合，只能包含元素節(jié)點(diǎn)（element），不能包含其他類型的節(jié)點(diǎn)。它的返回值是一個(gè)類似數(shù)組的對(duì)象，但是與NodeList接口不同，HTMLCollection沒有forEach方法，只能使用for循環(huán)遍歷。

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

document.links instanceof HTMLCollection // true

HTMLCollection實(shí)例都是動(dòng)態(tài)集合，節(jié)點(diǎn)的變化會(huì)實(shí)時(shí)反映在集合中。

如果元素節(jié)點(diǎn)有id或name屬性，那么HTMLCollection實(shí)例上面，可以使用id屬性或name屬性引用該節(jié)點(diǎn)元素。如果沒有對(duì)應(yīng)的節(jié)點(diǎn)，則返回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是一個(gè)HTMLCollection實(shí)例，可以通過<img>元素的id屬性值，從HTMLCollection實(shí)例上取到這個(gè)元素。

HTMLCollection.prototype.length

length屬性返回HTMLCollection實(shí)例包含的成員數(shù)量。

document.links.length // 18

HTMLCollection.prototype.item()

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

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

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

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

HTMLCollection.prototype.namedItem()

namedItem方法的參數(shù)是一個(gè)字符串，表示id屬性或name屬性的值，返回當(dāng)前集合中對(duì)應(yīng)的元素節(jié)點(diǎn)。如果沒有對(duì)應(yīng)的節(jié)點(diǎn)，則返回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']。