HTMLCollectionとNodeListの違い、およびそれらの取得方法
- 803単語
- 4分
- 08 Sep, 2024
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
を返します。
1const divs = document.getElementsByTagName("div"); // HTMLCollectionを返す
2. NodeList
NodeList
は、すべての種類のノード(要素ノード、テキストノード、コメントノードなど)を含むコレクションです。NodeList
は、取得方法に応じて静的(DOMが変更されても更新されない)またはリアルタイムである場合があります。
特徴
- 非リアルタイム更新:
querySelectorAll
で取得したNodeList
は静的で、更新されません。 - すべてのノードタイプを含む: 要素ノード以外に、テキストノードやコメントノードも格納されます。
- 多様な遍歴方法をサポート:
forEach()
を使ってNodeList
をループできます(モダンブラウザでサポート)。
取得方法
document.querySelectorAll(selector)
:静的なNodeList
を返します。document.childNodes
:すべての子ノード(要素、テキスト、コメントなど)を含むリアルタイムのNodeList
を返します。parentNode.childNodes
:特定のノードのすべての子ノードを取得し、NodeList
を返します。
1const divs = document.querySelectorAll("div"); // 静的なNodeListを返す
主な違いのまとめ
-
タイプの違い:
HTMLCollection
は要素ノードのみを含みます。NodeList
はすべての種類のノード(要素、テキスト、コメントなど)を含むことができます。
-
リアルタイム性:
HTMLCollection
はリアルタイムで更新されます。NodeList
はquerySelectorAll()
で取得した場合、静的です。childNodes
で取得した場合はリアルタイムです。
-
遍歴方法:
HTMLCollection
はインデックスを使って要素にアクセスできますが、forEach()
はサポートしていません。NodeList
はforEach()
を使ってループでき、柔軟な遍歴が可能です。
選択のアドバイス
- 動的なDOM構造を操作する必要がある場合、
HTMLCollection
を使用すると、DOMの変更に自動的に対応します。 - 静的な要素コレクションが必要な場合、特に
querySelectorAll()
で取得する静的なNodeList
がより適しています。
コード例
1// HTMLCollectionを取得2let htmlCollection = document.getElementsByClassName("example");3console.log(htmlCollection); // リアルタイムで更新されるコレクション4
5// NodeListを取得6let nodeList = document.querySelectorAll(".example");7console.log(nodeList); // 静的なコレクション8
9// NodeListの遍歴10nodeList.forEach((element) => {11 console.log(element);12});
HTMLCollection
とNodeList
の違いを理解することで、開発者はより柔軟にDOMを操作し、コードの性能とメンテナンス性を向上させることができます。