Εργασία με κόμβους στο JavaScript
Όπως γνωρίζετε, οι ετικέτες μπορούν να περιέχουν άλλες ετικέτες ή, μιλώντας σε όρους JavaScript, τα DOM στοιχεία μπορούν να περιέχουν άλλα DOM στοιχεία. Εκτός από αυτό, ωστόσο, μπορούν να περιέχουν σχόλια και απλό κείμενο. Τα σχόλια, τα κείμενα και τα DOM στοιχεία ενώνονται με έναν κοινό όρο - κόμβοι.
Σας είναι ήδη γνωστές οι ιδιότητες firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Αυτές οι ιδιότητες λειτουργούν ακριβώς με DOM στοιχεία,
αγνοώντας τους υπόλοιπους κόμβους. Κατά κανόνα, αυτό
είναι ακριβώς που απαιτείται.
Ωστόσο, υπάρχουν επίσης οι ιδιότητες firstChild,
lastChild, nextSibling, previousSibling.
Αυτές οι ιδιότητες λειτουργούν με παρόμοιο τρόπο,
ωστόσο, λαμβάνουν υπόψη όλους τους κόμβους. Ας δούμε
τη διαφορά μεταξύ αυτών των ιδιοτήτων με ένα παράδειγμα.
Ας υποθέσουμε ότι έχουμε ένα div που περιέχει τρεις κόμβους:
<div id="elem"><!--com-->text<span>tag</span></div>
Ας πάρουμε μια αναφορά σε αυτό το div σε μια μεταβλητή:
let elem = document.querySelector('#elem');
Και τώρα ας δούμε τι περιέχεται
στις ιδιότητες firstChild και firstElementChild:
console.log(elem.firstChild); // σχόλιο
console.log(elem.firstElementChild); // ετικέτα span
Γράψτε κώδικα που θα δείξει τη διαφορά μεταξύ
lastChild και lastElementChild.
Γράψτε κώδικα που θα δείξει τη διαφορά μεταξύ
nextSibling και nextElementSibling.
Γράψτε κώδικα που θα δείξει τη διαφορά μεταξύ
previousSibling και previousElementSibling.
