JavaScriptにおける疑似配列のタイプ間の違い

2種類の疑似配列の違いは、 DOM要素が変更されたときの動作の違いにあります。例えば、段落のコレクションを HTMLCollectionとNodeListの形式で取得したとします。その後、新しい段落を作成してDOMに追加します。この場合、新しい段落は自動的に HTMLCollectionに表示されますが、 NodeListコレクションは変更されません。

例を見てみましょう。div要素があり、その中に段落があるとします。同じ段落を2つの異なるタイプのコレクションとして取得します：

let parent = document.querySelector('div');
let elems1 = document.getElementsByTagName('p'); // HTMLCollection
let elems2 = document.querySelectorAll('p');     // NodeList

divにさらに段落を追加します：

let p = document.createElement('p');
parent.append(p);

結果として、一方のコレクションは変更され、もう一方は変更されません：

console.log(elems1); // 新しい段落を含む4つの段落
console.log(elems2); // 初期の3つの段落

新しい要素を追加したときの childrenプロパティの動作を確認してください。

新しい要素を追加したときの childNodesプロパティの動作を確認してください。