Różnica między typami pseudo-tablic w JavaScript

Różnica między dwoma typami pseudo-tablic polega na różnym zachowaniu przy zmianie elementów DOM. Załóżmy, na przykład, że otrzymaliśmy kolekcję akapitów jako HTMLCollection i jako NodeList. Następnie utworzymy i dodamy jeszcze jeden akapit do naszego DOM. W tym przypadku automatycznie pojawi się on w HTMLCollection, ale kolekcja NodeList pozostanie niezmieniona.

Spójrzmy na przykład. Niech bedzie div, a w nim akapity. Pobierzmy naszego diva i te same akapity jako kolekcje dwóch różnych typów:

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

Dodajmy jeszcze jeden akapit do naszego diva:

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

W rezultacie jedna z kolekcji ulegnie zmianie, a druga - nie:

console.log(elems1); // 4 akapity - z nowym
console.log(elems2); // 3 początkowe akapity

Sprawdź, jak zachowa się właściwość children po dodaniu nowego elementu.

Sprawdź, jak zachowa się właściwość childNodes po dodaniu nowego elementu.