JavaScript - HTMLCollectionとNodeListの違い

JavaScriptのDOM操作で、要素取得のメソッドによって戻り値が HTMLCllectionオブジェクトであったり、 NodeListオブジェクトであったりします。

両者はどう違うのでしょうか？

ここでは、HTMLCllectionとNodeList違いについて説明します。

どのメソッドの戻り値かが違う

HTMLCllectionオブジェクトを戻すメソッド

• document.getElementsByTagName()
• document.getElementsByClassName()

NodeListオブジェクトを戻すメソッド

• document.getElementsByName()
• document.querySelectorAll()

使えるメソッドが違う

HTMLCllectionとNodeListでは、使えるメソッドが違います。

NodeListの方が多くあります。

HTMLCllectionオブジェクトのメソッド

• HTMLCollection.item()
• HTMLCollection.namedItem()

NodeListオブジェクトのメソッド

• NodeList.item()
• NodeList.entries()
• NodeList.forEach()
• NodeList.keys()
• NodeList.values()

両者に共通しているのは、item()メソッドだけです。

後はどちらかにあるだけで、NodeListオブジェクトの方が多くあります。

メソッドを見てみると、NodeListオブジェクトの方が、 より配列に近いメソッドが使えます。

NodeList.forEach()メソッドを使ってみる

NodeList.forEach()メソッドを使って、次のような記述もできます。

var nodes = document.querySelectorAll('p');

nodes.forEach(function(node){
	console.log(node.textContent);
});

まとめ

・どのメソッドの戻り値かが違います。

・NodeListの方がメソッドが多くあります。

・ただし、実際のDOM操作において、 HTMLCllectionとNodeListはほぼ同じだと思っていてよいでしょう。