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:

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

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

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

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

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

Skontrolujte, ako sa bude správať vlastnosť children pri pridávaní nového elementu.

Skontrolujte, ako sa bude správať vlastnosť childNodes pri pridávaní nového elementu.