[JavaScript] Live NodeListとStatic NodeListについて

はじめに

この記事では、JavaScriptの要素セレクタにおけるLive NodeListとStatic NodeListの違いを解説する。

要素セレクタとは

要素セレクタは、HTML ドキュメント内の要素を選択するために使用される関数である。JavaScript には、さまざまな要素セレクタが用意されており、それらを使って HTML 要素にアクセスして操作できる。

Live NodeList とは

Live NodeListは、取得した要素リストが動的に更新される。元のHTMLに変更が加わると、リストの内容も自動的に変わる。つまり、元の HTML ドキュメントが変更されると、Live NodeList も自動的に更新される。

Live NodeListを生成するメソッド

const liveNodeList = document.getElementsByClassName('example');

このgetElementsByClassNameは、指定したクラスを持つ要素をリアルタイムに取得する。

同様に、以下のメソッドもLive NodeListを返す。

• getElementsByTagName
• getElementsByName
• childNodes

Static NodeList とは

Static NodeListは、取得した時点の要素リストが固定される。HTMLの変更があっても、リストの内容は更新されない。そのため、元の HTML ドキュメントが変更されても、Static NodeList の内容は変わらない。固定された要素リストを扱う場合に便利である。

Static NodeListを生成するメソッド

const staticNodeList = document.querySelectorAll('.example');

このquerySelectorAllは、指定したセレクタに一致する要素を取得し、リストの内容を固定する。

Live NodeList と Static NodeList の違い

querySelectorやgetElementByIdは単一の要素を取得するため、厳密にはNodeListではないが、固定された結果を返す点でStaticと同じ扱いになる。

どちらを選択すべきか？

Live NodeListが適しているケース

• 常に最新の要素リストを扱いたい場合
• 動的に要素が追加・削除されることが多い場合

Static NodeListが適しているケース

• 取得した要素リストを変更せずに使いたい場合
• パフォーマンスを重視する場合

結論

Live NodeListとStatic NodeListには、それぞれメリット・デメリットがある。
DOMが頻繁に変化する場面ではLive NodeListが便利。ただ、大量の要素を扱う場合はStatic NodeListのほうが負荷は少なく効率的。