JavaScript HTMLCollectionとNodeListの比較

`HTMLCollection`と`NodeList`

JavaScriptでDOMを操作する際、ウェブページ内で選択された複数のHTML要素が一度に返される場合があります。このとき返される要素の集まりを「DOMコレクション」と呼び、DOMコレクションには HTMLCollectionと NodeListがあります。

この2つのコレクションの概念と、それぞれの共通点および相違点を比較します。

DOMコレクションが2種類存在する理由

JavaScriptでDOMオブジェクトを直接取得して操作する場合、通常は関連する関数を使用して取得します。このとき、DOMを操作する特定の関数の中には、目的の要素を取得する際に、HTMLドキュメント内に同じ要素が1つではなく複数存在する可能性があります。

例えば、HTMLドキュメント内で指定したタグ名の要素を取得するgetElementsByTagName()関数で<div>タグを選択した場合、このタグがドキュメント内に1つだけ存在することもあれば、複数存在する場合もあります。

このとき、JavaScriptでは、指定した要素を取得する際に、選択された要素が複数存在する可能性がある関数の戻り値を、これらの要素をまとめた集合形式のオブジェクトとして返します。このようなオブジェクト形式を一般的に「DOMコレクション」と呼びます。

JavaScriptでは、このDOMコレクションは1つのオブジェクトではなく、HTMLCollectionと NodeListという2種類に分かれています。

なぜDOMコレクションが2種類に分かれているのでしょうか？これは、ウェブの発展とともにJavaScriptの歴史的背景として理解する必要があります。

`HTMLCollection`の誕生背景：初期のコレクション

現代的なウェブ以前のJavaScriptは、その使用用途や機能が非常に限定的であり、制約も多くありました。この時代にはDOMの構造も単純であり、いくつかの関数でHTML要素を操作できました。

このような時代に誕生したコレクションがHTMLCollectionです。

`NodeList`の誕生背景：現代的なコレクション

しかし、ウェブの発展に伴い、JavaScriptの利用や機能が拡張されると、既存のHTMLCollectionだけでは限界があり、より多くの要素を扱えるDOMコレクションが必要になりました。これがNodeListが誕生した理由です。

先ほど説明したように、DOMコレクションは歴史的背景とウェブ技術の発展の過程の中で、HTMLCollectionとNodeListの2種類に分かれることになりました。

初期から存在していたHTMLCollectionは、単純な要素の一覧をリアルタイムで管理することに重点が置かれており、機能的には制限がありました。一方、NodeListは、より複雑で多様なノード構造を扱えるよう設計されており、拡張された機能と現代的な標準に基づいて、ウェブ開発全般で幅広く活用されています。

限定的な`HTMLCollection`と拡張された`NodeList`をまとめた表
区分	`HTMLCollection`	`NodeList`
活用範囲	DOMの要素のみを扱うため	DOMの要素だけでなく、テキスト、コメント、属性などのノードを扱うため
要素の選択基準	タグ名、クラス名などの限定的な基準	CSSセレクタに基づいて柔軟な選択が可能
使用されるメソッド	`getElementsByTagName()`、`getElementsByClassName()`	`querySelectorAll()`

上の表を見れば分かるように、HTMLCollectionは、タグ名やクラス名などの単純な基準で要素を取得するために使用され、その用途は限定的です。一方、NodeListは、CSSセレクタに基づき、より多様な方法で要素を選択できるため、現代のウェブ開発ではNodeListの方がはるかに有用で、頻繁に使用されています。

`HTMLCollection`と`NodeList`オブジェクトの比較

では、技術的にもう少し詳しく、HTMLCollectionとNodeListを次の表で比較してみましょう。

HTMLCollectionとNodeListオブジェクトの比較
特徴	`HTMLCollection`	`NodeList`
使用目的	DOMの要素を扱うため	DOMの要素だけでなくテキスト、コメント、属性などのノードを扱うため
オブジェクトの生成	`getElementsByTagName()`、 `getElementsByClassName()`、その他の複数のメソッドの戻り値	`querySelectorAll()`、 `Node.childNodes`の戻り値
DOMの変更をリアルタイム（またはライブ）で反映	はい	`querySelectorAll()` 使用: いいえ `Node.childNodes` 使用: はい
類似配列オブジェクト	はい	はい
スプレッド構文や`Array.from()`で配列に変換可能	はい	はい
`for...of`文でのループが可能	はい	はい
`for`文でのループが可能	はい	はい
`forEach()`メソッドでループ可能	いいえ	はい
`length`プロパティで長さを取得可能	はい	はい
利点	DOMの変更をリアルタイム（またはライブ）で反映（ただし、`for`文を使用する際は注意が必要）	`querySelectorAll()`メソッドはCSSセレクタを引数として使用できるため、目的の要素を簡単に操作できる（最大の利点です）類似配列オブジェクトですが、配列に変換せずとも`forEach()`メソッドでループできるため、扱いやすいです
欠点	クラス名やタグ名でしかオブジェクトを生成できないため、目的の要素を簡単に選択できない不便さがある（最大の欠点です）	`querySelectorAll()`メソッドは、DOMの変更をリアルタイム（またはライブ）で反映しません `Node.childNodes`プロパティは、DOMの変更をリアルタイム（またはライブ）で反映しますが、作業が煩雑です