DOM

：

：

NodeList オブジェクト

　 編集：2022.02.15 by T.A.

→●、MS

NodeList オブジェクトはノードのコレクションである。

NodeList は Array とは異なりますが、forEach() メソッドで処理を反復適用することは可能です。Array.from() を使うことで Array に変換することができます。

ただし、古いブラウザーでは NodeList.forEach() も Array.from() も実装されていない場合があります。これらの制限は Array.prototype.forEach を使うことで回避することが可能です（この文書に詳しく書かれています）。

プロパティ
NodeList.length ●
NodeList に含まれるノードの数です。
メソッド
NodeList.item() ●
指定されたインデックスに対応するリスト内の要素を返します。ただし、インデックスが範囲外の場合は null を返します。

nodeList[i] のアクセスの代替手段です（この場合、i が範囲外の時には undefined が返ります)。これは JavaScript 以外の言語による DOM の実装で便利です。

NodeList.entries()
iterator を返し、これによってコードがコレクションに含まれているキー・値の組を順次処理することができます。（この場合、キーは 0 から始まる数値で値はノードです。）
NodeList.forEach()
指定された関数を NodeList の各要素に対して実行し、その要素を関数の引数として渡します。
NodeList.keys()
iterator を返し、これによってコードがコレクションに含まれているキー・値の組のキーを順次処理することができます。 (この場合、キーは 0 から始まる数値です。)
NodeList.values()
iterator を返し、これによってコードがコレクションに含まれているキー・値の組の値 (ノード) を順次処理することができます。
例
NodeList の各要素について処理を順次適用するには、以下のような方法があります。 
for (var i = 0; i < myNodeList.length; i++) {
  var item = myNodeList[i];
}

リストの要素について処理を回すために for...in や for each...in を用いてはいけません。なぜなら、NodeList のプロパティである要素に加えて、length プロパティについても処理が適用されるため、element オブジェクトのみ処理すべきスクリプトではエラーが生じます。また、for..in で取得されるプロパティの順番は保証されていません。

for...of ループであれば、NodeList オブジェクトを正しく扱うことができます。 

var list = document.querySelectorAll('input[type=checkbox]');
for (var checkbox of list) {
  checkbox.checked = true;
}
最近のブラウザでは、イテレーターに基づくメソッドとして forEach()、entries()、values()、keys() に対応しています。

また、Internet Explorer と互換性がある手法として、反復に Array.prototype.forEach を使用することができます。 

var list = document.querySelectorAll('input[type=checkbox]');
Array.prototype.forEach.call(list, function (checkbox) {
  checkbox.checked = true;
});
テスト
HTML：

ここに表示
スクリプト組み込み：



スクリプト：


スクリプト：



表示内容：
表示内容：