【javascript】HTMLCollectionとNodeListの要素追加時の違い

DOMに要素を追加する際に、HTMLCollectionが動的で、NodeListが静的ということなんだけど実際にどう違うのか気になったので備忘録

HTMLCollectionとNodeListの要素の追加方法

div要素の中に<p>テキスト</p>を追加することで違いを検証

HTMLCollectionを使った要素の追加方法

getElementsByTagName()でHTMLCollectionとして要素を取得できる

<div></div>

<script>
var elm = document.getElementsByTagName('div');// HTMLCollectionで取得
var p = document.createElement('p');// pタグ作成
p.textContent = 'テキスト';// テキストをpタグに追加
elm.item(0).appendChild(p);// HTMLCollectionのitem()メソッドで最初のdiv要素に作成したタグを追加
</script>

HTMLCollectionは配列っぽいオブジェクトなのでitemメソッドを使ってインデックスを指定する必要性がある

NodeListを使った要素の追加方法

querySelectorAll()でNodeListとして要素を取得できる

<div></div>

<script>
var elm = document.querySelectorAll('div');// NodeListで取得
var p = document.createElement('p');// pタグ作成
var text = document.createTextNode("テキスト"); // テキストノードを作成："テキスト"
p.appendChild(text); // p要素にテキストノードを追加：<p>テキスト</p>
elm.item(0).appendChild(p);// NodeListのitem()メソッドで最初のdiv要素に作成したタグを追加
</script>

NodeListも配列っぽいオブジェクトだからitemメソッドで指定をする必要性がある

とりあえず、比べてみると
HTMLCollectionでの要素追加(4行)
NodeListでの要素追加(5行)
と大差はないけどNodeListの方がノードに揃えて追加する必要性があるから手間はかかるね

って思ったらNodeListの追加でtextContentプロパティ使ってノードに追加することができるみたい…つまり
NodeListも4行になるから要素を追加する際にHTMLCollectionとの差はない
↓textContentを使うとこうなる

// NodeListで要素を追加-修正版
var elm = document.querySelectorAll('div');// NodeListで取得
var p = document.createElement('p');// pタグ作成
p.textContent = 'テキスト';// テキストをpタグに追加
elm.item(0).appendChild(p);// NodeListのitem()メソッドで最初のdiv要素に作成したタグを追加

じゃあ、HTMLCollectionは動的でNodeListは静的ってどう違うの？って話だけど
ulにli要素を新しく追加して、追加した後にconsole.logで確認するとHTMLCollectionは追加した要素が反映されてて、NodeListは追加した要素が反映されていないって違いみたい

だから、HTMLCollectionとNodeListは同じようなものという認識でもいいのかも…

まとめ

HTMLCollectionとNodeListを使った要素を追加する際にコードに差はほとんどない
要素を追加した後にHTMLCollectionは反映が確認できるけど、NodeListは反映を確認することができない

おまけ：直接Elementを取得する場合

document.getElementById()はHTMLCollectionやNodeListではなく要素を直接取得するので試しにやってみた

<div id="test"></div>

<script>
var elm = document.getElementById('test');// 要素を取得
var p = document.createElement('p');
p.textContent = 'テキスト';
elm.appendChild(p);
</script>

…。
直接要素を取得するときも、要素を追加するコードは変わらんね