Κατανόηση του μοντέλου αντικειμένου εγγράφου (DOM) στις λεπτομέρειες
Όλοι έχουμε ακούσει για το DOM, ή Μοντέλο αντικειμένου εγγράφου, που αναφέρεται από καιρό σε καιρό, σχετικά με το JavaScript. Το DOM είναι μια αρκετά σημαντική έννοια στην ανάπτυξη ιστού. Χωρίς αυτό, δεν θα μπορούσαμε να τροποποιήσετε δυναμικά τις σελίδες HTML στο πρόγραμμα περιήγησης.
Η εκμάθηση και η κατανόηση του DOM οδηγεί σε καλύτερους τρόπους πρόσβαση, αλλαγή και παρακολούθηση διαφορετικά στοιχεία μιας σελίδας HTML. Το μοντέλο αντικειμένων εγγράφου μπορεί επίσης να μας βοηθήσει να μειώσετε τις περιττές αυξήσεις του χρόνου εκτέλεσης δέσμης ενεργειών.
Δέντρα δομής δεδομένων
Πριν μιλήσουμε για το τι είναι το DOM, πώς εμφανίζεται, πώς υπάρχει και τι συμβαίνει μέσα του, θέλω να ξέρετε για τα δέντρα. Δεν είναι το κωνοφόρο και φυλλοβόλο είδος, αλλά για το δομή δομής δεδομένων.
Είναι πολύ πιο εύκολο να κατανοήσουμε την έννοια των δομών δεδομένων, αν απλοποιήσουμε τον ορισμό της. Θα έλεγα ότι μια δομή δεδομένων είναι περίπου οργάνωση των δεδομένων σας. Ναι, απλά παλιά ρύθμιση, όπως θα κανονίσετε τα έπιπλα στο σπίτι ή τα βιβλία σας σε ένα ράφι ή σε όλες τις διαφορετικές ομάδες τροφίμων που έχετε για ένα γεύμα στο πιάτο σας, προκειμένου να καθιστούν σημαντικό για εσάς.
Φυσικά, αυτό δεν είναι το μόνο που υπάρχει σε μια δομή δεδομένων, αλλά αυτό είναι λίγο πολύ όπου όλα ξεκινούν. Αυτό “συμφωνία” βρίσκεται στην καρδιά όλων αυτών. Είναι πολύ σημαντικό και στο DOM. Αλλά δεν μιλάμε ακόμα για το DOM, επομένως επιτρέψτε μου να σας κατευθύνω προς ένα δομή δεδομένων που ίσως γνωρίζετε: πίνακες.
Arrays & δέντρα
Οι συστοιχίες έχουν δείκτες και μήκος, Μπορεί να είναι πολυδιάστατη, και έχουν πολλά άλλα χαρακτηριστικά. Εξίσου σημαντικό είναι να γνωρίζουμε αυτά τα πράγματα σχετικά με τις συστοιχίες, ας μην ενοχλήσουμε τον εαυτό μας τώρα. Για μας, μια διάταξη είναι πολύ απλή. Είναι όταν εσύ να κανονίσετε διαφορετικά πράγματα σε μια γραμμή.
Ομοίως, όταν σκέφτομαι τα δέντρα, ας πούμε, είναι περίπου θέτοντας τα πράγματα κάτω από το ένα το άλλο, ξεκινώντας με ένα μόνο πράγμα στην κορυφή.
Τώρα, μπορείτε να πάρετε τις πάπιες μιας γραμμής από πριν, γυρίστε το όρθιο, και πείτε μου αυτό “τώρα, κάθε πάπια είναι κάτω από μια άλλη πάπια”. Είναι τότε ένα δέντρο; είναι.
Ανάλογα με τα δεδομένα σας ή τον τρόπο που θα τα χρησιμοποιείτε, τα κορυφαία δεδομένα στο δέντρο σας (που ονομάζεται ρίζα) μπορεί να είναι κάτι που είναι εξαιρετικής σημασίας ή κάτι που είναι μόνο εκεί για να περικλείουν άλλα στοιχεία κάτω από αυτό.
Είτε έτσι είτε αλλιώς, το ανώτατο στοιχείο σε μια δομή δεδομένων δέντρου κάνει κάτι πολύ σημαντικό. Παρέχει μια θέση στο ξεκινήστε να ψάχνετε για οποιαδήποτε πληροφορία θέλετε να εξαγάγετε από το δέντρο.
Η έννοια του DOM
Το DOM αντιπροσωπεύει Μοντέλο αντικειμένου εγγράφου. Το έγγραφο υποδεικνύει ένα έγγραφο HTML (XML) το οποίο είναι αντιπροσωπεύεται ως Αντικείμενο. (Σε JavaScript μπορεί πάντα να αντιπροσωπεύεται μόνο ως αντικείμενο!)
Το μοντέλο είναι που δημιουργήθηκε από το πρόγραμμα περιήγησης που λαμβάνει ένα έγγραφο HTML και δημιουργεί ένα αντικείμενο που την αντιπροσωπεύει. Μπορούμε να έχουμε πρόσβαση σε αυτό το αντικείμενο με JavaScript. Και δεδομένου ότι χρησιμοποιούμε αυτό το αντικείμενο για να χειραγωγήσουμε το έγγραφο HTML και να δημιουργήσουμε τις δικές μας εφαρμογές, Το DOM είναι βασικά ένα API.
Η δέντρο DOM
Στον κώδικα JavaScript, το έγγραφο HTML είναι αντιπροσωπεύεται ως αντικείμενο. Όλα τα δεδομένα που διαβάζονται από αυτό το έγγραφο είναι αποθηκεύτηκαν επίσης ως αντικείμενα, (όπως λέγαμε προηγουμένως, σε JavaScript, τα πάντα μπορούν πάντα να εκπροσωπούνται μόνο ως αντικείμενα).
Έτσι, αυτό είναι βασικά η φυσική διάταξη των δεδομένων DOM στον κώδικα: όλα είναι διατίθενται ως αντικείμενα. Λογικά όμως, είναι ένα δέντρο.
Ο προγραμματιστής DOM
Κάθε λογισμικό προγράμματος περιήγησης έχει ένα πρόγραμμα που ονομάζεται DOM Parser που είναι υπεύθυνη για ανάλυση ενός εγγράφου HTML στο DOM.
Τα προγράμματα περιήγησης διαβάζουν μια σελίδα HTML και μετατρέπουν τα δεδομένα της σε αντικείμενα που αποτελούν το DOM. Οι πληροφορίες που υπάρχουν σε αυτά τα αντικείμενα DOM DOM είναι λογικά διευθετημένα ως δομή δομής δεδομένων γνωστή ως δέντρο DOM.
Ανάλυση δεδομένων από HTML στο δέντρο DOM
Πάρτε ένα απλό αρχείο HTML. Έχει το στοιχείο ρίζας . Του επιμέρους στοιχεία είναι και , κάθε ένα έχει πολλά παιδικά στοιχεία της δικής του.
Έτσι ουσιαστικά, το πρόγραμμα περιήγησης διαβάζει τα δεδομένα στο έγγραφο HTML, κάτι παρόμοιο με αυτό:
Και, τα οργανώνει σε ένα δέντρο DOM σαν αυτό:
Η αναπαράσταση κάθε στοιχείου HTML (και του περιεχομένου του ανήκειν) στο δέντρο DOM είναι γνωστό ως a Κόμβος. ο κόμβος ρίζας είναι ο κόμβος του .
ο DOM interface στο JavaScript καλείται έγγραφο (δεδομένου ότι είναι η αναπαράσταση του εγγράφου HTML). Έτσι, έχουμε πρόσβαση στο δέντρο DOM ενός εγγράφου HTML μέσα από έγγραφο διεπαφή στο JavaScript.
Δεν μπορούμε μόνο να έχουμε πρόσβαση, αλλά και χειριστείτε το έγγραφο HTML μέσω του DOM. Μπορούμε να προσθέσουμε στοιχεία σε μια ιστοσελίδα, να τα αφαιρέσουμε και να τα ενημερώσουμε. Κάθε φορά που αλλάζουμε ή ενημερώνουμε οποιονδήποτε κόμβους στο δέντρο DOM, αυτό αντανακλάται στην ιστοσελίδα.
Πώς σχεδιάζονται οι κόμβοι
Έχω αναφέρει προηγουμένως ότι κάθε κομμάτι δεδομένων από ένα έγγραφο HTML είναι αποθηκεύτηκε ως αντικείμενο στο JavaScript. Έτσι, πώς τα δεδομένα που αποθηκεύονται ως αντικείμενο μπορούν να ταξινομηθούν λογικά ως δέντρο?
Οι κόμβοι ενός δέντρου DOM έχουν ορισμένα χαρακτηριστικά ή ιδιότητες. Σχεδόν κάθε κόμβος σε ένα δέντρο έχει έναν γονικό κόμβο (ο κόμβος ακριβώς πάνω από αυτό), παιδικούς κόμβους (οι κόμβοι κάτω από αυτό) και αδέλφια (άλλοι κόμβοι που ανήκουν στον ίδιο γονέα). Έχοντας αυτό οικογένεια πάνω, κάτω, και γύρω από έναν κόμβο είναι αυτό που το χαρακτηρίζει ως α μέρος ενός δέντρου.
Αυτή η οικογενειακή πληροφορία του κάθε κόμβου είναι αποθηκεύονται ως ιδιότητες στο αντικείμενο που αντιπροσωπεύει αυτόν τον κόμβο. Για παράδειγμα, παιδιά είναι μια ιδιότητα ενός κόμβου που μεταφέρει μια λίστα με τα παιδικά στοιχεία αυτού του κόμβου, οργανώνοντας έτσι λογικά τα παιδικά του στοιχεία κάτω από τον κόμβο.
Αποφύγετε την παρακώλυση του χειρισμού DOM
Όσο περισσότερο μπορούμε να βρούμε χρήσιμη την ενημέρωση του DOM (για να τροποποιήσουμε μια ιστοσελίδα), υπάρχει κάτι τέτοιο να το παρακάνετε.
Πέστε, θέλετε να ενημερώσετε το χρώμα ενός Αλλά τι γίνεται αν θέλετε αφαιρέστε έναν κόμβο από ένα δέντρο ή προσθέστε ένα σε αυτό? Όλο το δέντρο ενδέχεται να χρειαστεί αναδιάταξη, με τον κόμβο να αφαιρεθεί ή να προστεθεί στο δέντρο. Αυτή είναι μια δαπανηρή δουλειά. Χρειάζεται χρόνος και πόρος του προγράμματος περιήγησης για να γίνει αυτό το έργο. Για παράδειγμα, ας πούμε, θέλετε προσθέστε πέντε επιπλέον σειρές σε ένα τραπέζι. Για κάθε γραμμή, όταν οι νέοι κόμβοι της δημιουργούνται και προστίθενται στο DOM, το Το δέντρο ενημερώνεται κάθε φορά, προσθέτοντας μέχρι πέντε ενημερώσεις συνολικά. Μπορούμε να αποφύγουμε αυτό χρησιμοποιώντας το Αυτό δεν συμβαίνει μόνο όταν αφαιρούμε ή προσθέτουμε στοιχεία, αλλά αλλαγή μεγέθους ενός στοιχείου μπορεί επίσης να επηρεάσει και άλλους κόμβους, καθώς το στοιχείο αλλαγής μεγέθους ίσως χρειαστεί άλλα στοιχεία γύρω από αυτό προσαρμόσετε το μέγεθός τους. Επομένως, οι αντίστοιχοι κόμβοι όλων των άλλων στοιχείων θα πρέπει να ενημερωθούν και τα στοιχεία HTML θα αποτυπωθούν ξανά σύμφωνα με τους νέους κανόνες. Ομοίως, όταν επηρεάζεται η διάταξη μιας ιστοσελίδας στο σύνολό της, ένα μέρος ή το σύνολο της ιστοσελίδας μπορεί να γίνει εκ νέου. Αυτή είναι η διαδικασία που είναι γνωστή ως Επαναλάβετε. Ωστε να αποφύγετε την υπερβολική επαναφορά βεβαιωθείτε ότι δεν αλλάζετε υπερβολικά το DOM. Οι αλλαγές στο DOM δεν είναι το μόνο πράγμα που μπορεί να προκαλέσει την επαναφορά μιας ιστοσελίδας. Ανάλογα με το πρόγραμμα περιήγησης, μπορούν να συμβάλουν και άλλοι παράγοντες. Εμπλοκώντας τα πράγματα, το DOM είναι απεικονίζεται ως δέντρο που αποτελείται από όλα τα στοιχεία που βρίσκονται σε ένα έγγραφο HTML. Φυσικά (όσο φυσικό μπορεί να πάρει οτιδήποτε ψηφιακό), είναι α σύνολο ένθετων αντικειμένων JavaScript των οποίων ιδιότητες και μέθοδοι κατέχουν τις πληροφορίες που το καθιστούν εφικτό να τα οργανώσετε λογικά σε ένα δέντρο.DocumentFragment διεπαφή. Σκεφτείτε το ως ένα κουτί που θα μπορούσε κρατήστε όλες τις πέντε σειρές και να προστεθεί στο δέντρο. Με αυτόν τον τρόπο είναι οι πέντε σειρές προστίθενται ως ένα μόνο κομμάτι δεδομένων και όχι ένα προς ένα, οδηγώντας μόνο σε μία ενημέρωση στο δέντρο.Τυλίγοντας
