Rozdíl mezi typy pseudopole v JavaScriptu

Rozdíl mezi dvěma typy pseudopole je v různém chování při změně DOM elementů. Předpokládejme, že jsme získali kolekci odstavců jako HTMLCollection a jako NodeList. Poté vytvoříme a přidáme další odstavec do našeho DOM. V tomto případě se automaticky objeví v HTMLCollection, ale kolekce NodeList zůstane beze změn.

Podívejme se na příklad. Mějme div a v něm odstavce. Získáme náš div a stejné odstavce jako kolekce dvou různých typů:

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

Přidejme další odstavec do našeho divu:

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

V důsledku toho se jedna kolekce změní, a druhá - ne:

console.log(elems1); // 4 odstavce - s novým
console.log(elems2); // 3 počáteční odstavce

Ověřte, jak se bude chovat vlastnost children při přidání nového elementu.

Ověřte, jak se bude chovat vlastnost childNodes při přidání nového elementu.