HTMLCollectionとNodeListの違い、およびそれらの取得方法

Web開発において、HTMLCollectionとNodeListは、複数のDOM要素を格納する一般的なDOMオブジェクトコレクションです。それらは似ているように見えますが、動作や特性にいくつか顕著な違いがあります。これらの違いを理解することは、DOM要素を効率的に操作するために重要です。

1. HTMLCollection

HTMLCollectionはリアルタイムで更新されるコレクションです。DOM構造が変更された際、HTMLCollectionはこれらの変更を自動的に反映します。HTMLCollectionには要素ノードのみが含まれ、テキストノードやコメントノードなど他の種類のノードは格納されません。

特徴

• リアルタイム更新: DOM構造が変わると、HTMLCollectionは自動的に更新されます。
• 多様なアクセス方法: インデックス、lengthプロパティ、要素のidやnameプロパティを通じて要素にアクセスできます。
• 要素ノードのみを含む: テキストノードやコメントノードは無視されます。

取得方法

• document.getElementsByTagName(tagName)：タグ名で要素コレクションを取得します。
• document.getElementsByClassName(className)：クラス名で要素コレクションを取得します。
• document.forms、document.images、document.links：これらもHTMLCollectionを返します。

1
const divs = document.getElementsByTagName("div"); // HTMLCollectionを返す

2. NodeList

NodeListは、すべての種類のノード（要素ノード、テキストノード、コメントノードなど）を含むコレクションです。NodeListは、取得方法に応じて静的（DOMが変更されても更新されない）またはリアルタイムである場合があります。

特徴

• 非リアルタイム更新: querySelectorAllで取得したNodeListは静的で、更新されません。
• すべてのノードタイプを含む: 要素ノード以外に、テキストノードやコメントノードも格納されます。
• 多様な遍歴方法をサポート: forEach()を使ってNodeListをループできます（モダンブラウザでサポート）。

取得方法

• document.querySelectorAll(selector)：静的なNodeListを返します。
• document.childNodes：すべての子ノード（要素、テキスト、コメントなど）を含むリアルタイムのNodeListを返します。
• parentNode.childNodes：特定のノードのすべての子ノードを取得し、NodeListを返します。

1
const divs = document.querySelectorAll("div"); // 静的なNodeListを返す

主な違いのまとめ

1. タイプの違い：

   • HTMLCollectionは要素ノードのみを含みます。
   • NodeListはすべての種類のノード（要素、テキスト、コメントなど）を含むことができます。

2. リアルタイム性：

   • HTMLCollectionはリアルタイムで更新されます。
   • NodeListは querySelectorAll() で取得した場合、静的です。childNodesで取得した場合はリアルタイムです。

3. 遍歴方法：

   • HTMLCollectionはインデックスを使って要素にアクセスできますが、forEach()はサポートしていません。
   • NodeListはforEach()を使ってループでき、柔軟な遍歴が可能です。

選択のアドバイス

• 動的なDOM構造を操作する必要がある場合、HTMLCollectionを使用すると、DOMの変更に自動的に対応します。
• 静的な要素コレクションが必要な場合、特にquerySelectorAll()で取得する静的なNodeListがより適しています。

コード例

1
// HTMLCollectionを取得
2
let htmlCollection = document.getElementsByClassName("example");
3
console.log(htmlCollection); // リアルタイムで更新されるコレクション
4

5
// NodeListを取得
6
let nodeList = document.querySelectorAll(".example");
7
console.log(nodeList); // 静的なコレクション
8

9
// NodeListの遍歴
10
nodeList.forEach((element) => {
11
  console.log(element);
12
});

HTMLCollectionとNodeListの違いを理解することで、開発者はより柔軟にDOMを操作し、コードの性能とメンテナンス性を向上させることができます。