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はほぼ同じだと思っていてよいでしょう。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする