JavaScript Academy · レッスン

NodeList と HTMLCollection

Q: 「NodeList と HTMLCollection」で何を学びますか？

要素コレクションの違いを理解します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

要素コレクションの違いを理解します。

「NodeList と HTMLCollection」はCoddyKit上の無料JavaScript Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

2 種類のコレクション

DOM のメソッドは、リストのような 2 種類のオブジェクトのいずれかを返します。NodeList と HTMLCollection です。見た目は似ていますが、重要な違いがあります。

NodeList の取得元

querySelectorAll と childNodes は NodeList オブジェクトを返します。querySelectorAll が返すものは静的で、クエリ実行時点のスナップショットです。

const items = document.querySelectorAll(".item"); // static NodeList

HTMLCollection の取得元

getElementsByClassName、getElementsByTagName、children プロパティは、ライブな HTMLCollection オブジェクトを返します。

const items = document.getElementsByClassName("item"); // live HTMLCollection

静的とライブの違い

静的な NodeList は、DOM が変更されても元の内容を保持します。ライブな HTMLCollection は、要素の追加や削除を自動的に反映します。

const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does not

forEach のサポート

NodeList には組み込みの forEach があります。HTMLCollection にはないため、変換するかインデックスループを使う必要があります。

document.querySelectorAll(".item").forEach((el) => {
  console.log(el.textContent);
});

どちらも実際の配列ではない

どちらも配列のように扱えます。length とインデックスによるアクセスはありますが、map、filter、reduce はありません。

const list = document.querySelectorAll(".item");
// list.map is undefined

Array.from による変換

Array.from はどちらのコレクションも実際の配列に変換し、すべての配列メソッドを使えるようにします。

const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);

スプレッド構文による変換

スプレッド演算子は、実際の配列も生成できる簡潔な代替方法です。

const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);

ライブリストのループに関する落とし穴

ライブな HTMLCollection を反復処理しながら要素を削除すると、インデックスがずれて項目を飛ばしてしまいます。安全に反復処理するには、先に配列へ変換してください。

const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safe

どちらもインデックス指定に対応

どちらも数値によるインデックス指定と length をサポートしているため、基本的なアクセス方法は同じに見えます。ただし、内部の動作は異なります。

const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);

適切なほうを選ぶ

安定したスナップショットと組み込みの forEach が必要な場合は querySelectorAll を使います。リストを DOM と常に同期させる必要がある場合は、ライブなコレクションを使います。

簡単な確認

違いを見分けましょう。

まとめ

NodeList（querySelectorAll から取得）は静的で forEach を備えています。一方、HTMLCollection（getElementsByClassName、getElementsByTagName、children から取得）はライブで、forEach がありません。どちらも実際の配列ではありません。map/filter/reduce を使う前や、変更しながら安全に反復処理する前に、Array.from またはスプレッド構文で変換してください。

よくある質問

「NodeList と HTMLCollection」レッスンは無料ですか？

はい。「NodeList と HTMLCollection」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「NodeList と HTMLCollection」で何を学びますか？

要素コレクションの違いを理解します。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「NodeList と HTMLCollection」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← JavaScript Academyに戻る