JavaScriptで複数の要素を取得する際、getElementsByClassNameメソッドやquerySelectorAllメソッドとさまざまなメソッドを使用して取得します。戻ってくる値は、HTMLCollectionやNodeListというオブジェクトで返ってきます。しかし、同じまとまった形なのに使用するメソッドによっては、HTMLCollectionやNodeListと違いがあります。ここではどのような違いがあるのかを軽く説明したいと思います。
HTMLCollectionとは
HTMLCollectionは、複数の要素の集合体で、配列に似たオブジェクトです。また、一致した要素がDOM上に増加したり減少したりした場合にも動的に反映されます。
HTMLCollectionは次のメソッドやプロパティによって返されます。
- document.getElementsByTagNameメソッド
- document.getElementsByClassNameメソッド
- document.getElementsByNameメソッド
- document.anchorsプロパティ
- document.linksプロパティ
- document.formsプロパティ
- document.imagesプロパティ
- Element.childrenプロパティ
HTMLCollectionは次のプロパティやメソッドを持ちます。
