本記事では、JavaScriptのHTMLCollectionとNodeListの違いについて解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
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を使った場合、要素数は更新されないため取得したタイミングの情報のままになります。
