Διαφορά μεταξύ τύπων ψευδο-πινάκων στο JavaScript

Η διαφορά μεταξύ των δύο τύπων ψευδο-πινάκων έγκειται στη διαφορετική συμπεριφορά όταν αλλάζουν τα στοιχεία DOM. Ας υποθέσουμε, για παράδειγμα, ότι λάβαμε μια συλλογή παραγράφων σε μορφή HTMLCollection και σε μορφή NodeList. Στη συνέχεια δημιουργούμε και προσθέτουμε μια ακόμη παράγραφο στο DOM μας. Σε αυτή την περίπτωση, αυτόματα θα εμφανιστεί στην HTMLCollection, αλλά η συλλογή NodeList θα παραμείνει αμετάβλητη.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε ένα div, και μέσα σε αυτό παραγράφους. Θα πάρουμε το div μας και τις ίδιες παραγράφους σε μορφή συλλογών δύο διαφορετικών τύπων:

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

Ας προσθέσουμε μια ακόμη παράγραφο στο div μας:

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

Ως αποτέλεσμα, η μία συλλογή θα αλλάξει, ενώ η δεύτερη - όχι:

console.log(elems1); // 4 παράγραφοι - με τη νέα
console.log(elems2); // 3 αρχικές παράγραφοι

Ελέγξτε πώς θα συμπεριφερθεί η ιδιότητα children κατά την προσθήκη ενός νέου στοιχείου.

Ελέγξτε πώς θα συμπεριφερθεί η ιδιότητα childNodes κατά την προσθήκη ενός νέου στοιχείου.