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

2023/04/25

5 min read

はじめに

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

要素セレクタとは

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

Live NodeList とは

Live NodeList は、HTML ドキュメント内の要素のリストを表すオブジェクトで、そのリストが動的に更新されることが特徴である。つまり、元の HTML ドキュメントが変更されると、Live NodeList も自動的に更新される。

Static NodeList とは

Static NodeList は、Live NodeList と同様に、HTML ドキュメント内の要素のリストを表すオブジェクトであるが、一度生成された後は更新されない。そのため、元の HTML ドキュメントが変更されても、Static NodeList の内容は変わらない。

Live NodeList と Static NodeList の違い

更新方法

Live NodeList は、元の HTML ドキュメントが変更されると自動的に更新されるが、Static NodeList は一度生成された後は更新されない。これが両者の最も大きな違いである。

パフォーマンス

Live NodeList は動的に更新されるため、パフォーマンス面で Static NodeList よりも劣る場合がある。特に、大量の要素を扱う場合や頻繁に DOM が更新される場合には、Live NodeList のパフォーマンスが影響を受けることがある。対して、Static NodeList は更新されないため、パフォーマンス面での影響は少ない。

使用方法

Live NodeList と Static NodeList は、それぞれ異なる関数を使って生成される。後述する各関数を使って、適切なリストを選択して利用することが大切である。

Live NodeList の例

getElementsByClassName

getElementsByClassNameは、指定したクラス名を持つ要素をすべて取得し、Live NodeList を返す関数である。以下のように使用する。

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

childNodes

childNodesは、ある要素の子要素をすべて取得し、Live NodeList を返すプロパティである。以下のように使用する。

const liveNodeList = element.childNodes;

その他の Live NodeList 生成メソッド

getElementsByClassName以外にも、以下のような Live NodeList を生成するメソッドがある。

getElementsByTagName: 指定したタグ名を持つ要素をすべて取得し、Live NodeList を返す関数
getElementsByName: 指定した name 属性を持つ要素をすべて取得し、Live NodeList を返す関数

Static NodeList の例

querySelectorAll

querySelectorAllは、指定したセレクタにマッチする要素をすべて取得し、Static NodeList を返す関数である。以下のように使用する。

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

その他の Static NodeList 生成メソッド

querySelectorAll以外にも、以下のような Static NodeList を生成するメソッドがある。

getElementsByTagName
getElementsByName

Live NodeList と Static NodeList を生成するメソッドの違いまとめ

メソッド	返却するオブジェクト	Static / Live NodeList
`querySelector`	HTMLElement	Static
`querySelectorAll`	NodeList	Static
`getElementById`	HTMLElement	Static
`getElementsByTagName`	HTMLCollection	Live
`getElementsByClassName`	HTMLCollection	Live

※ querySelectorとgetElementByIdは単一のHTMLElementを返すため、厳密にはNodeListではないが、Static として扱われる。

どちらを選択すべきか

ユースケース

Live NodeList と Static NodeList のどちらを選択するかは、ユースケースによって異なる。

DOM が更新されることが予想される場合や常に最新の要素を取得したい場合には、Live NodeList を使用することが適切である。一方、一度取得した要素を固定したい場合やパフォーマンスを重視する場合には、Static NodeList を使用することが適切である。

パフォーマンスと互換性

前述の通り、Live NodeList はパフォーマンス面で劣ることがあるため、必要に応じて Static NodeList を選択することが望ましいである。また、一部の関数やプロパティは、古いブラウザではサポートされていないことがあるため、互換性も考慮する必要がある。

結論

JavaScript の要素セレクタにおける Live NodeList と Static NodeList は、それぞれ異なる特徴と利点がある。適切なリストを選択して利用することで、効率的に DOM 操作できる。

Edit on GitHub