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

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

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

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

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

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

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

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