JavaScriptのHTMLCollectionとNodeListの違い

HTMLCollectionとNodeListは、どちらもDOM（Document Object Model）を操作する際に、複数の要素を取得するためにJavaScriptで利用されるオブジェクトコレクションです。しかし、それぞれの特徴や使用方法にいくつかの違いがあります。

生成される方法の違い

主にdocument.getElementsByClassName()、document.getElementsByTagName()、document.formsなど、HTML要素に関連するメソッドで生成されます。
HTMLCollectionは、HTMLドキュメント内の特定のタグ名やクラス名に一致する要素を返すため、主にHTML特有のメソッドで使用されます。

document.querySelectorAll()、document.childNodesなど、より一般的なノード（HTML要素に限らず、テキストノードやコメントノードを含む場合もあります）を扱うメソッドで生成されます。
NodeListは、DOM内のノードを扱うため、HTML以外の要素を含むこともあります。

HTMLCollectionは動的（ライブ）です。HTMLドキュメントが変更されると、自動的に内容が更新されます。

例：document.getElementsByClassName("example")で取得したHTMLCollectionを使って操作する場合、ページ内の要素が変化すると（追加や削除）、コレクションの内容も自動的に更新されます。

NodeListは静的（非ライブ）であることが一般的です。ただし、一部のブラウザやメソッドによっては動的NodeListが返される場合もあります。

例：document.querySelectorAll(".example")で取得したNodeListは静的で、後でDOMが変更されても、コレクションには反映されません。

HTMLCollectionとNodeListの両方は、配列のようにインデックスで要素にアクセスすることは可能ですが、完全に配列ではないため、配列のメソッドは直接利用できません。

HTMLCollectionにはforEach()メソッドがなく、反復処理にはforループなどが必要です。
NodeList（特にquerySelectorAllによって生成されたもの）はES6以降、forEach()などのメソッドを使用できますが、ブラウザ互換性により注意が必要です。
Array.from()を使ってHTMLCollectionやNodeListを配列に変換し、mapやfilterといった配列メソッドを使用することもできます。

特徴	HTMLCollection	NodeList
生成方法	getElementsByClassNameなどのHTML特有メソッドで生成	querySelectorAllやchildNodesなどで生成
動的 or 静的	動的（ライブ）	静的（一般的に非ライブ）
配列メソッドの利用	直接利用不可	querySelectorAllで生成された場合はforEachなどが利用可能
要素の種類	HTML要素ノードのみ	HTML要素ノードのほか、テキストノードやコメントノードも含む場合がある