HTMLCollectionとNodeListの違い〜初心者にもわかりやすく解説〜

HTML&CSS

ウェブ制作を始めたばかりの人にとって、HTMLCollectionとNodeListは混乱を招くかもしれません。

この記事では、HTMLCollectionとNodeListの違いについて解説し、具体的なサンプルコードを交えて説明します。

HTMLCollectionとNodeListの違いについて理解することで、どちらを使用するべきかを判断できるようになり、効果的なWEB開発に役立てることができるでしょう。

HTMLCollectionとは

HTMLCollectionは、ウェブページ内の特定の要素のグループを表すオブジェクトです。

このオブジェクトは、要素の名前やタグ名、クラス名などを使用して要素を取得するために使用されます。

例えば、以下のようなHTMLコードを考えてみましょう。

<ul id="myList">
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>

この場合、次のようなJavaScriptコードを使用して、idが”myList”のul要素内のli要素を取得できます。

const list = document.getElementById('myList').getElementsByTagName('li');

このコードにより、HTMLCollectionが返され、listという変数に格納されます。

HTMLCollectionは、配列のようにインデックスを使用して要素にアクセスできます。

NodeListとは

NodeListは、ウェブページ内の要素のノードのリストを表すオブジェクトです。

ノードには、要素ノード、テキストノード、コメントノードなどが含まれます。

NodeListは、querySelectorAllメソッドなどを使用して要素を取得するために使用されます。

以下は、NodeListの例です。

const elements = document.querySelectorAll('li');

このコードは、すべてのli要素を選択し、NodeListが返されます。

NodeListもHTMLCollectionと同様に、配列のようにインデックスを使用して要素にアクセスすることができます。

HTMLCollectionとNodeListの違い

HTMLCollectionとNodeListはいくつかの重要な違いがあります。

  • 要素の取得方法の違い
  • ダイナミックな変化
  • 繰り返し処理における違い

要素の取得方法の違い

HTMLCollectionはgetElementById、getElementsByTagName、getElementsByClassNameなどのメソッドを使用して要素を取得します。

一方、NodeListはquerySelectorAllなどのメソッドを使用して要素を取得します。

<ul id="myList">
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>
const htmlCollection = document.getElementById('myList').getElementsByTagName('li');
console.log(htmlCollection); // HTMLCollection(3) [li, li, li]

const nodeList = document.querySelectorAll('li');
console.log(nodeList); // NodeList(3) [li, li, li]

ダイナミックな変化

HTMLCollectionはライブコレクションであり、ウェブページの要素が動的に変更されると自動的に更新されます。

具体的には、要素が追加されたり、削除されたり、属性が変更されたりすると、HTMLCollectionがそれらの変更を反映します。

<ul id="myList">
  <li>アイテム1</li>
  <li>アイテム2</li>
</ul>

<button id="addItem">アイテムを追加</button>
const htmlCollection = document.getElementById('myList').getElementsByTagName('li');

console.log(htmlCollection); // 最初の状態: HTMLCollection(2) [li, li]

const addItemButton = document.getElementById('addItem');
addItemButton.addEventListener('click', function() {
  const newItem = document.createElement('li');
  newItem.textContent = '新しいアイテム';
  document.getElementById('myList').appendChild(newItem);

  console.log(htmlCollection); // 変更後の状態: HTMLCollection(3) [li, li, li]
});

上記のコードでは、最初にHTMLCollectionを取得してコンソールに表示しています。

その後、ボタンをクリックすると新しいアイテムがリストに追加されます。

この時、HTMLCollectionは自動的に変更を反映し、新しいアイテムを含むHTMLCollectionが表示されます。

一方、NodeListは静的なリストであり、要素の変更が反映されません。つまり、NodeListは変更前の状態の要素を保持し続けます。

<ul id="myList">
  <li>アイテム1</li>
  <li>アイテム2</li>
</ul>

<button id="addItem">アイテムを追加</button>
const nodeList = document.querySelectorAll('li');

console.log(nodeList); // 最初の状態: NodeList(2) [li, li]

const addItemButton = document.getElementById('addItem');
addItemButton.addEventListener('click', function() {
  const newItem = document.createElement('li');
  newItem.textContent = '新しいアイテム';
  document.getElementById('myList').appendChild(newItem);

  console.log(nodeList); // 変更後の状態: NodeList(2) [li, li]
});

上記のコードでは、最初にNodeListを取得してコンソールに表示しています。

同様にボタンをクリックすると新しいアイテムが追加されますが、NodeListは変更前の状態のままであり、新しいアイテムは含まれません。

繰り返し処理における違い

HTMLCollectionは、配列のようにインデックスを使用して要素にアクセスすることができます。

そのため、forループやforEachメソッドを使用して繰り返し処理を行うことができます。

以下は、HTMLCollectionを繰り返し処理する例です。

const htmlCollection = document.getElementsByTagName('li');

for (let i = 0; i < htmlCollection.length; i++) {
  console.log(htmlCollection[i]);
}

htmlCollection.forEach((element) => {
  console.log(element);
});

一方、NodeListは配列ではなく、繰り返し処理に対しては少し異なるアプローチが必要です。

NodeListはforEachメソッドを直接サポートしていないため、通常のforループを使用して繰り返し処理を行います。

以下は、NodeListを繰り返し処理する例です。

const nodeList = document.querySelectorAll('li');

for (let i = 0; i < nodeList.length; i++) {
  console.log(nodeList[i]);
}

ES6以降のJavaScriptでは、NodeListを配列に変換してから繰り返し処理を行うこともできます。

Array.fromメソッドやスプレッド構文を使用して、NodeListを配列に変換する方法があります。

const nodeList = document.querySelectorAll('li');
const arrayFromNodeList = Array.from(nodeList);

arrayFromNodeList.forEach((element) => {
  console.log(element);
});

// または

const spreadArray = [...nodeList];

spreadArray.forEach((element) => {
  console.log(element);
});

以上のように、HTMLCollectionは直接繰り返し処理を行うことができますが、NodeListは通常のforループや配列への変換を使用する必要があります。

まとめ

HTMLCollectionとNodeListは、ウェブページの要素を取得するための異なる方法です。

HTMLCollectionは動的で、要素の変更を反映しますが、NodeListは静的で変更を反映しません。

具体的な要件に応じて、どちらを使用するべきかを選択する必要があります。

コメント

タイトルとURLをコピーしました