JavaScript

【JavaScript】HTMLCollectionとNodeListの違い

本記事では、JavaScriptのHTMLCollectionとNodeListの違いについて解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

HTMLCollectionとは?

HTMLCollectionとは、「document.getElementsByClassName()」や「document.getElementsByTagName()」などで取得することができる配列風オブジェクトのことを指します。

<!-- 下記のコードは以降の解説でも使用します -->
<div>
  <button class="btn">ボタン1</button>
  <button class="btn">ボタン2</button>
  <button class="btn">ボタン3</button>
</div>
const classElem = document.getElementsByClassName("btn");
console.log(classElem); // -> HTMLCollection(3) [button.btn, button.btn, button.btn]

const tagElem = document.getElementsByTagName("button");
console.log(tagElem); // -> HTMLCollection(3) [button.btn, button.btn, button.btn]

NodeListとは?

NodeListとは、document.querySelectorAll()で取得することができる配列風オブジェクトのことを指します。

const queryElem = document.querySelectorAll(".btn");
console.log(queryElem); // -> NodeList(3) [button.btn, button.btn, button.btn]

HTMLCollectionとNodeListの違い

ここからが本題のHTMLCollectionとNodeListの違いを解説していきます。結論から話すと動的に生成された要素を反映するか反映しないかの違いです。

まず始めにHTMLCollectionのdocument.getElementsByClassName()を使って、btnクラスを取得しその後に新規でbtnクラスが付与されている要素を生成します。

const contentDiv = document.getElementById("content");
const classElem = document.getElementsByClassName("btn");
console.log(classElem.length); // -> 3

const newTag = document.createElement("button");
newTag.classList.add("btn");
newTag.textContent = "ボタン4";
contentDiv.appendChild(newTag);

console.log(classElem.length); // -> 4(追加された要素が反映!)

すると、ボタンが追加された後にclassElemに代入されている要素数が一つ増えていることが確認できます。このようにHTMLCollectionを使った場合、要素数は更新されます。

続いてNodeListのdocument.querySelectorAll()を使った場合を確認してみましょう。

const contentDiv = document.getElementById("content");
const classElem = document.querySelectorAll(".btn");
console.log(classElem.length); // -> 3

const newTag = document.createElement("button");
newTag.classList.add("btn");
newTag.textContent = "ボタン4";
contentDiv.appendChild(newTag);

console.log(classElem.length); // -> 3(追加された要素が反映されていない・・・)

すると、ボタンが追加されたのに要素数が更新されていません。このようにNodeListを使った場合、要素数は更新されないため取得したタイミングの情報のままになります。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村