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

  • 803単語
  • 4分
  • 08 Sep, 2024

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

1. HTMLCollection

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

特徴

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

取得方法

  • document.getElementsByTagName(tagName):タグ名で要素コレクションを取得します。
  • document.getElementsByClassName(className):クラス名で要素コレクションを取得します。
  • document.formsdocument.imagesdocument.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はリアルタイムで更新されます。
    • NodeListquerySelectorAll() で取得した場合、静的です。childNodesで取得した場合はリアルタイムです。
  3. 遍歴方法

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

選択のアドバイス

  • 動的な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
});

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