Ο κρυμμένος ήρωας των ιστότοπων: Κατανόηση του DOM

Το "DOM" είναι ένας όρος που χρησιμοποιείται πολύ στον σχεδιασμό και την ανάπτυξη ιστοσελίδων front-end. Αντιπροσωπεύει το "Document Object Model" και αποτελεί θεμελιώδες μέρος των ιστότοπων.

Εξίσου σημαντικό με το DOM, πολλοί άνθρωποι δεν το καταλαβαίνουν. Στην πραγματικότητα, μπορείτε να προγραμματίσετε ιστότοπους για χρόνια χωρίς να μάθετε πολλά για αυτό. Όμως, καθώς η τεχνολογία front-end εξελίσσεται, η κατανόηση του DOM γίνεται πιο σημαντική.

Κατανόηση της σύμβασης DOM

Στον αντικειμενοστρεφή προγραμματισμό, υπάρχει μια κατασκευή που ονομάζεται διεπαφή. Μια διεπαφή δεν κάνει τίποτα από μόνη της. Αντ 'αυτού, δημιουργεί ένα συμβόλαιο. Λέει ότι οτιδήποτε μπορεί να αλληλεπιδράσει με οτιδήποτε άλλο, αρκεί να ακολουθεί τους κανόνες της σύμβασης διεπαφής.

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

Μια διεπαφή είναι σαν μια ηλεκτρική πρίζα στον τοίχο σας. Η συσκευή σας δεν χρειάζεται να γνωρίζει από πού προέρχεται η ισχύς, αρκεί η τάση να είναι σωστή. Ο μετασχηματιστής στη γωνία δεν χρειάζεται να γνωρίζει τι τροφοδοτεί. Απλώς πρέπει να στέλνει ηλεκτρικό ρεύμα στην κατάλληλη τάση στο σπίτι σας.

Το DOM είναι ένα επίπεδο διεπαφής μεταξύ της ιστοσελίδας και του κώδικα που το δημιουργεί και το αλλάζει. Όταν επισκέπτεστε έναν ιστότοπο, βλέπετε πώς το πρόγραμμα περιήγησης αποδίδει το DOM αυτού του ιστότοπου. Όταν γράφετε HTML, προγραμματίζετε πραγματικά χρησιμοποιώντας το API του DOM (διεπαφή προγραμματισμού).

Το πρότυπο DOM διατηρείται από έναν οργανισμό που ονομάζεται η Κοινοπραξία World Wide Webή W3C. Έχουν δημιουργήσει πολύ λεπτομερή τεκμηρίωση που ορίζει το DOM πρότυπο.

Σε αυτό το σημείο, ίσως σκέφτεστε ότι δεν κάνουν πολύ καλή δουλειά. Εξάλλου, υπάρχουν τόσα πολλά προβλήματα που προκαλούνται από ζητήματα συμβατότητας μεταξύ προγραμμάτων περιήγησης.

Το πρόβλημα δεν είναι με το πρότυπο. Είναι με τα ίδια τα προγράμματα περιήγησης. Πολλά προγράμματα περιήγησης έχουν προσθέσει λειτουργικότητα στην εφαρμογή DOM που δεν συμμορφώνεται με τα πρότυπα W3C. Μερικές φορές αυτή η λειτουργικότητα γίνεται δημοφιλής και εφαρμόζεται στο πρότυπο DOM, αναγκάζοντας άλλα προγράμματα περιήγησης να καλύψουν τη διαφορά.

Ένα άλλο πρόβλημα είναι ότι ορισμένα άτομα εξακολουθούν να χρησιμοποιούν παλαιότερες εκδόσεις προγραμμάτων περιήγησης που δεν διαθέτουν το πιο πρόσφατο ενσωματωμένο πρότυπο DOM. Και μερικές φορές τα προγράμματα περιήγησης δεν εφαρμόζουν σωστά το πρότυπο.

Πώς είναι δομημένο το DOM

Μπορείτε να σκεφτείτε το DOM σαν δέντρο. ο το στοιχείο είναι ο κορμός και όλα τα στοιχεία μέσα του είναι κλαδιά. Όταν τοποθετείτε στοιχεία HTML μέσα σε ένα γονικό στοιχείο, δημιουργείτε πραγματικά κλάδους εκτός αυτού του κλάδου. Ο κατάλληλος όρος για κάθε κλάδο είναι "κόμβος".

Η δομή του δέντρου δημιουργεί λογικές σχέσεις μεταξύ κόμβων, όπως ένα οικογενειακό δέντρο. Κάθε κόμβος μπορεί να έχει έναν γονέα και προγόνους από τους οποίους διακλαδίζεται. Μπορούν να έχουν αδέλφια. Και οι κόμβοι μπορούν να έχουν παιδιά και απογόνους. Η σκέψη με αυτούς τους όρους βοηθά πολύ όταν χρησιμοποιείτε JavaScript και CSS για να αλληλεπιδράσετε με το DOM.

Πώς αλληλεπιδρά η HTML με το DOM

Το DOM ορίζεται δημιουργώντας ένα αντικείμενο εγγράφου με τη διεπαφή εγγράφου. Ο κώδικας HTML σας είναι ο πιο άμεσος τρόπος δημιουργίας ενός εγγράφου. Το HTML σάς δίνει έναν απλό τρόπο να ορίσετε το έγγραφο χωρίς να χρειάζεται να κάνετε παραδοσιακό προγραμματισμό.

Εάν μόλις ξεκινήσετε με το HTML, εδώ είναι πέντε συμβουλές για να εξοικειωθείτε με αυτό.

5 βήματα για την κατανόηση του βασικού κώδικα HTML

Η HTML είναι η ραχοκοκαλιά κάθε ιστοσελίδας. Εάν είστε αρχάριος, ας σας καθοδηγήσουμε στα βασικά βήματα για την κατανόηση του HTML.

Η HTML είναι απλούστερη και πιο συγχωρητική από τις παραδοσιακές γλώσσες προγραμματισμού. Διευκολύνει την αλληλεπίδραση με το DOM για αρχάριους σχεδιαστές ιστοσελίδων.

Πώς αλληλεπιδρά το CSS με το DOM

Μόλις ο HTML σας δομήσει το έγγραφο DOM, το CSS μπορεί να διαμορφώσει αυτό το έγγραφο. Για να γίνει αυτό, πρέπει να είναι σε θέση να βρει τα στοιχεία που θέλετε να σχεδιάσετε. Αυτό το κάνει με μερικούς τρόπους.

Μπορείτε να αποκτήσετε πρόσβαση σε κόμβους εγγράφων αναφέροντας στοιχεία με όνομα, όπως και. Το CSS μπορεί επίσης να έχει πρόσβαση στα στοιχεία απευθείας με αναφορά τάξη και ταυτότητα ονόματα. Το στυλ της τάξης εφαρμόζεται σε πολλά στοιχεία, ώστε να μπορείτε να τα διαμορφώσετε όλα ταυτόχρονα. Αντίθετα, το στυλ ταυτότητας εφαρμόζει αλλαγές σε ένα μόνο στοιχείο.

Μπορείτε επίσης να αποκτήσετε πρόσβαση στη δομή του οικογενειακού δέντρου με CSS και να βελτιώσετε την πρόσβαση για περισσότερο έλεγχο. Οι επιλογείς CSS σάς επιτρέπουν να επιλέξετε πολλά στοιχεία και σας δίνει μια τσάντα από κόλπα για να τα βρείτε. Μπορείτε να αναζητήσετε παιδιά από την καταγωγή τους, συνδυασμούς τάξεων και πολλά άλλα.

Πώς αλληλεπιδρά το JavaScript με το DOM

Το JavaScript έχει τον μεγαλύτερο έλεγχο στο έγγραφο, επειδή το JavaScript είναι μια πραγματική γλώσσα προγραμματισμού με αντικείμενα, έλεγχο ροής, μεταβλητές κ.λπ. Το DOM παρέχει πολλές διεπαφές που επιτρέπουν στη JavaScript τη δυνατότητα χειρισμού του εγγράφου, των στοιχείων και άλλων κόμβων.

Σχετιζομαι με: Τι είναι το JavaScript;

Το JavaScript μπορεί να προσθέσει και να αφαιρέσει κόμβους καθώς και να αλλάξει το στυλ του. Και το JavaScript μπορεί να παρακολουθήσει συμβάντα στο έγγραφο, όπως να τοποθετήσετε το ποντίκι πάνω από ένα στοιχείο, να κάνετε κλικ και να πατήσετε τα πλήκτρα.

Το JavaScript μπορεί να πραγματοποιήσει αναζήτηση και πλοήγηση στο δέντρο εγγράφων με παρόμοιο τρόπο με το CSS. Είναι σε θέση να βρει στοιχεία ανά αναγνωριστικό και τάξη. Και μπορεί να ανακτήσει λίστες θυγατρικών στοιχείων ως πίνακες.

Το μέλλον της ανάπτυξης Ιστού και του DOM

Το Διαδίκτυο έχει αλλάξει πολύ από τις πρώτες μέρες. Τις πρώτες μέρες, το JavaScript χρησιμοποιήθηκε ως επί το πλείστον για ειδικά εφέ και απλές εμφανίσεις δεδομένων. Οι περισσότεροι ιστότοποι δεν ήταν πολύ περισσότερα από ψηφιακά φυλλάδια. Ωστόσο, η AJAX άλλαξε όλα αυτά.

Το AJAX επιτρέπει στους ιστότοπους να ενημερώνουν τα δεδομένα που εμφανίζονται από έναν διακομιστή εν κινήσει χωρίς να φορτώσουν ξανά τη σελίδα. Πριν από το AJAX, κάθε αλλαγή στα δεδομένα ήταν ορατή μόνο όταν η σελίδα φορτώθηκε εκ νέου ή όταν ο χρήστης περιήγησε σε άλλη σελίδα.

Μετά το AJAX, οι εφαρμογές ιστού έγιναν όλο και πιο δημοφιλείς. Το Διαδίκτυο δεν είναι πλέον μια συλλογή από απλούς στατικούς ιστότοπους και μερικές εφαρμογές υψηλής λειτουργικότητας, όπως το eBay. Τώρα το Διαδίκτυο είναι σχεδόν ένα δεύτερο λειτουργικό σύστημα, γεμάτο με πολύ λειτουργικές εφαρμογές.

Καθώς οι προσδοκίες των χρηστών αυξάνονται, η τεχνολογία πρέπει να συμβαδίζει. Η JavaScript δεν είναι η πιο ισχυρή ή ταχύτερη γλώσσα. Υποφέρει επίσης από λίγα ζητήματα, όπως σφάλματα αριθμών κινητής υποδιαστολής που το καθιστούν λιγότερο επιθυμητό για προγραμματιστές. Εδώ μπαίνει το WebAss Assembly.

Το WebAss Assembly φέρνει πολλά από τα οφέλη του εγγενούς κώδικα στο πρόγραμμα περιήγησης, όπως βελτιωμένη ταχύτητα και καλύτερη πρόσβαση στο υλικό. Θα επιτρέψει στους προγραμματιστές να χρησιμοποιούν άλλες γλώσσες για τη δημιουργία ιστότοπων όπως το C ++ και το Rust.

Αλλά ακόμη και με τις τεράστιες βελτιώσεις που θα φέρει το WebAss Assembly, το DOM θα παραμείνει εκεί, παρέχοντας μια συνεπή διεπαφή μεταξύ του κώδικα και του τι εμφανίζεται στο πρόγραμμα περιήγησης.

Τρόπος χρήσης του Outlook σε σκοτεινή λειτουργία

Μειώστε την καταπόνηση των ματιών και ενισχύστε τη διάρκεια ζωής της μπαταρίας σας, αλλάζοντας το Microsoft Outlook σε σκοτεινή λειτουργία.

Σχετικά με τον Συγγραφέα