HTML CollectionとNodeListの違い【JavaScript】

HTML CollectionとNodeListはともに配列風のオブジェクトですが、挙動が若干異なります。

今回は、HTML CollectionとNodeListの違いについて解説していきます。

HTML Collection

HTML Collectionは、以下のようなメソッドで取得できる配列風のオブジェクトです。

document.getElementsByClassName()
document.getElementsByTagName()

以下のHTMLとJavaScriptで挙動を確認してみましょう。

<ul id="list">
    <li class="item">テキスト</li>
    <li class="item">テキスト</li>
    <li class="item">テキスト</li>
    <li class="item">テキスト</li>
</ul>

getElementsByClassNameで要素を取得してconsole.logで中身を見れば、HTMLCollectionと出力されます。

const item = document.getElementsByClassName('item'); 
console.log(item); // => HTMLCollection

NodeList

HTML Collectionは、以下のようなメソッドで取得できる配列風のオブジェクトです。

document.querySelectorAll()

先ほどのHTMLにあるitemクラスの要素をquerySelectorAllで取得してconsole.logで中身を見ると、NodeListと出力されます。

const item = document.querySelectorAll('.item'); 
console.log(item); // => NodeList

次に、HTML CollectionとNodeListの違いを解説していきます。

HTML CollectionとNodeListの違い

HTML CollectionとNodeListでは、要素の増減後の挙動とメソッドが異なります。

HTML Collectionは動的、NodeListは静的

HTML Collectionは後から要素の数が増減しても、動的に反映されます。

<ul id="list">
    <li class="item">テキスト</li>
    <li class="item">テキスト</li>
    <li class="item">テキスト</li>
    <li class="item">テキスト</li>
</ul>

const item = document.getElementsByClassName('item');

console.log(item.length); // => 4

// 要素を追加
const newList = document.createElement('li');
newList.innerText = 'テキスト';
newList.classList.add('item');
const list = document.getElementById('list');
list.appendChild(newList);

console.log(item.length); // => 5

一方、NodeListは要素の数が変わっても、後からそれが反映されません。

const item = document.querySelectorAll('.item');
console.log(item.length); // => 4

// 要素を追加
const newList = document.createElement('li');
newList.innerText = 'テキスト';
newList.classList.add('item');
const list = document.getElementById('list');
list.appendChild(newList);

console.log(item.length); // => 4

メソッドが異なる

HTML CollectionとNodeListでは使えるメソッドが異なります。

例えば、NodeListではforEachメソッドが使えますが、HTML Collectionでは使えません。

以下のループ処理は問題なく動作します。

const item = document.querySelectorAll('.item');

// 動作する
item.forEach((value, index) => {
    value.classList.add('new-class');
});

しかし、以下のコードはエラーになります。

const item = document.getElementsByClassName('item');

// エラーになる
item.forEach((value, index) => {
    value.classList.add('new-class');
});

HTML CollectionでforEachを使ったループ処理を行いたい場合は、以下のようにします。

const item = document.getElementsByClassName('item');

Array.prototype.forEach.call( item, (value, index) => {
    value.classList.add('new-class');
});

//もしくは

[...item].forEach((value, index) => {
    value.classList.add('new-class');
});