Rozdiel medzi typmi pseudo-polí v JavaScript

Rozdiel medzi dvoma typmi pseudo-polí spočíva v rôznom správaní pri zmene DOM elementov. Povedzme napríklad, že sme získali kolekciu odsekov ako HTMLCollection a ako NodeList. Potom vytvoríme a pridáme ďalší odsek do nášho DOM. V tomto prípade sa automaticky objaví v HTMLCollection, ale kolekcia NodeList zostane bez zmien.

Pozrime sa na príklad. Nech máme div a v ňom odseky. Získame náš div a tie isté odseky ako kolekcie dvoch rôznych typov:

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

Pridajme ďalší odsek do nášho divu:

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

Výsledkom je, že jedna z kolekcií sa zmení, a druhá - nie:

javascriptconsole.log(elems1); // 4 odseky - s novým
console.log(elems2); // 3 počiatočné odseky