NodeListインターフェース、HTMLCollectionインターフェース

ノードは単一のオブジェクトであり、場合によっては複数のノードに対応できるデータ構造が必要になります。 DOM は、複数のノードに対応する 2 つのノード コレクション、NodeList と HTMLCollection を提供します。

どちらのセットもインターフェイス仕様です。多くの DOM プロパティとメソッドは、NodeList インスタンスまたは HTMLCollection インスタンスを返します。主な違いは、NodeList にはさまざまなタイプのノードを含めることができ、HTMLCollection には HTML 要素ノードのみを含めることができることです。

NodeList インターフェース

概要

NodeList インスタンスは、メンバーがノード オブジェクトである配列のようなオブジェクトです。 NodeList インスタンスは以下のメソッドで取得できます。

• Node.childNodes
• document.querySelectorAll() およびその他のノード検索メソッド

document.body.childNodesinstanceofNodeList // true

NodeList インスタンスは配列によく似ており、length プロパティと forEach メソッドを使用できます。ただし、配列ではないため、「pop」や「push」などの配列固有のメソッドは使用できません。

var Children = document.body.childNodes;

Array.isArray(children) // false

Children.length // 34
Children.forEach(コンソール.ログ)

上記のコードでは、NodeList インスタンスの「children」は配列ではありませんが、「length」プロパティと「forEach」メソッドを持っています。

NodeList インスタンスで配列メソッドを使用したい場合は、実数の配列に変換できます。

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

forEach メソッドを使用して NodeList インスタンスを反復することに加えて、for ループを使用することもできます。

var Children = document.body.childNodes;

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

NodeList インスタンスは動的コレクションまたは静的コレクションの場合があることに注意してください。いわゆる動的コレクションは、DOM が関連ノードを削除または追加すると、すぐに NodeList インスタンスに反映されます。現在、「Node.childNodes」のみが動的コレクションを返し、他の NodeList は静的コレクションです。

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

上記のコードでは、ドキュメントは子ノードを追加し、NodeList インスタンス children の length プロパティが 1 だけ増加します。

NodeList.prototype.length

「length」プロパティは、NodeList インスタンスに含まれるノードの数を返します。

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

上記のコードでは、「document.querySelectorAll」は NodeList コレクションを返します。存在しない HTML タグの場合、「length」属性は「0」を返します。

NodeList.prototype.forEach()

forEach メソッドは、NodeList のすべてのメンバーを反復処理するために使用されます。パラメータとしてコールバック関数を受け取り、このコールバック関数は走査の各ラウンドで 1 回実行されます。使用方法は配列インスタンスの forEach メソッドとまったく同じです。

var Children = document.body.childNodes;
Children.forEach(function f(item, i, list) {
  // ...
}、 これ）;

上記のコードでは、コールバック関数 f の 3 つのパラメーターは、現在のメンバー、位置、および現在の NodeList インスタンスです。 forEach メソッドの 2 番目のパラメータは、コールバック関数内の 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()

これら 3 つのメソッドはすべて、ES6 トラバーサー オブジェクトを返します。このオブジェクトは、「for...of」 ループを通過して各メンバーの情報を取得できます。違いは、keys() はキー名のトラバーサを返し、values() はキー値のトラバーサを返し、entries() はキー名とキー値の両方に関する情報を含むトラバーサを返すことです。

var Children = document.body.childNodes;

for (children.keys() の var key) {
  コンソール.ログ(キー);
}
// 0
// 1
// 2
// ...

for (children.values() の var 値) {
  console.log(値);
}
// #文章
// <スクリプト>
// ...

for (children.entries() の var エントリ) {
  コンソール.ログ(エントリ);
}
// 配列 [ 0, #text ]
// 配列 [ 1, <script> ]
// ...

HTMLCollection インターフェース

概要

HTMLCollection は、要素ノード (要素) のみを含めることができ、他のタイプのノードを含めることはできないノード オブジェクトのコレクションです。その戻り値は配列のようなオブジェクトですが、NodeList インターフェースとは異なり、HTMLCollection には forEach メソッドがなく、for ループを使用してのみトラバースできます。

HTMLCollection のインスタンスを返すのは主に、document.links、document.forms、document.images などの一部の Document オブジェクトのコレクション属性です。

document.links HTMLCollection のインスタンス // true

HTMLCollection インスタンスは動的コレクションであり、ノードの変更はリアルタイムでコレクションに反映されます。

要素ノードに id または name 属性がある場合、id 属性または name 属性を使用して HTMLCollection インスタンスのノード要素を参照できます。該当するノードが無い場合はnullを返す。

// HTMLコードは以下の通り
// <img id="pic" src="http://example.com/foo.jpg">

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 = ドキュメント.イメージ;
var img0 = c.item(0);

上記のコードでは、item(0) は位置 0 のメンバーを返すことを意味します。角括弧演算子は同じ効果があり、使用する方が便利であるため、通常は角括弧演算子が常に使用されます。

パラメータ値がメンバーの数を超えているか、不正な場合 (たとえば、0 未満)、item メソッドは null を返します。

HTMLCollection.prototype.namedItem()

namedItem メソッドのパラメータは、id 属性または name 属性の値を表す文字列で、現在のコレクション内の対応する要素ノードを返します。該当するノードが無い場合はnullを返す。

// HTMLコードは以下の通り
// <img id="pic" src="http://example.com/foo.jpg">

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

Collection.namedItem('value') は Collection['value'] と同等です。