【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

【JavaScript】HTMLCollectionとNodeListの違い

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,794 (2024/06/09 03:43時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
目次

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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次