Frontend · Άρθρο
Τι είναι το DOM;
Γράφεις HTML, αλλά ο browser δεν δουλεύει πάνω σε αυτό το κείμενο — φτιάχνει από αυτό μια ζωντανή δομή στη μνήμη, το DOM (Document Object Model). Κάθε φορά που ένα κουμπί αλλάζει χρώμα ή μια λίστα προσθέτει ένα στοιχείο χωρίς reload, κάποιος πείραξε αυτή τη δομή, όχι το αρχικό αρχείο HTML.
Το HTML δεν είναι το DOM
Το HTML που γράφεις είναι απλά κείμενο — οδηγίες. Ο browser το διαβάζει μία φορά και χτίζει από πάνω του ένα δέντρο από αντικείμενα: το DOM. Από εκεί και πέρα, ό,τι βλέπεις στην οθόνη είναι αντανάκλαση αυτού του δέντρου, όχι του αρχικού αρχείου.
Ένα δέντρο από κόμβους
Κάθε ετικέτα (<div>, <p>, <button>) γίνεται ένας κόμβος (node) στο δέντρο, με γονείς και παιδιά. Το <body> είναι γονιός όλων όσων βλέπεις· ένα <li> μέσα σε <ul> είναι παιδί του. Αυτή η ιεραρχία επιτρέπει σε ένα script να βρει ακριβώς ένα στοιχείο και να το αλλάξει, χωρίς να πειράξει τα υπόλοιπα.
Το JavaScript το χειρίζεται
Το document.querySelector() ψάχνει μέσα στο δέντρο, το .textContent ή το .style αλλάζουν έναν κόμβο, και το addEventListener() ακούει για κλικ, πληκτρολόγηση ή scroll. Όλα αυτά δουλεύουν πάνω στο DOM — ζωντανά, χωρίς να ξαναφορτώνεται η σελίδα.
Γιατί οι μεγάλες αλλαγές το κάνουν αργό
Κάθε φορά που το DOM αλλάζει, ο browser πρέπει να ξαναϋπολογίσει layout και να ξαναζωγραφίσει την οθόνη. Χίλιες μικρές αλλαγές μία-μία είναι πιο αργές από μία μεγάλη αλλαγή μαζεμένη — γι' αυτό frameworks όπως το React δεν αγγίζουν το πραγματικό DOM απευθείας σε κάθε render, αλλά υπολογίζουν πρώτα τι πραγματικά χρειάζεται να αλλάξει.
Με λίγα λόγια
- Το DOM είναι η ζωντανή δομή που φτιάχνει ο browser από το HTML σου.
- Είναι δέντρο από κόμβους, με γονείς και παιδιά.
- Το JavaScript διαβάζει και αλλάζει το DOM, όχι το αρχικό αρχείο HTML.
- Πολλές μικρές αλλαγές στο DOM κοστίζουν περισσότερο από μία μεγάλη.
Σχόλια · 0