Unterschied zwischen Typen von Pseudo-Arrays in JavaScript

Der Unterschied zwischen den beiden Typen von Pseudo-Arrays liegt im unterschiedlichen Verhalten bei Änderungen von DOM-Elementen. Nehmen wir an, wir haben eine Sammlung von Absätzen als HTMLCollection und als NodeList erhalten. Wenn wir dann einen weiteren Absatz erstellen und hinzufügen in unserem DOM, erscheint dieser automatisch in der HTMLCollection, aber die Sammlung NodeList bleibt unverändert.

Schauen wir uns ein Beispiel an. Angenommen, wir haben ein Div und darin Absätze. Wir holen unser Div und die gleichen Absätze in Form von Sammlungen zweier unterschiedlicher Typen:

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

Fügen wir einen weiteren Absatz in unser Div hinzu:

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

Als Ergebnis wird sich eine der Sammlungen ändern, die andere jedoch nicht:

console.log(elems1); // 4 Absätze - mit dem neuen
console.log(elems2); // 3 anfängliche Absätze

Prüfen Sie, wie sich die Eigenschaft children beim Hinzufügen eines neuen Elements verhält.

Prüfen Sie, wie sich die Eigenschaft childNodes beim Hinzufügen eines neuen Elements verhält.