Προγραμματισμός DOM: Χειριστείτε ιστοσελίδες με κώδικα

Αποκάλυψη: Η υποστήριξή σας βοηθά στη διατήρηση της λειτουργίας του ιστότοπου! Κερδίζουμε ένα τέλος παραπομπής για ορισμένες από τις υπηρεσίες που προτείνουμε σε αυτήν τη σελίδα.


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

Ουσιαστικά, κάθε σελίδα HTML, XHTML ή XML αφού μεταφορτωθεί στον Ιστό, γίνεται έγγραφο. Το DOM βλέπει αυτά τα έγγραφα ως δομή δέντρου. Το ίδιο το έγγραφο είναι η κορυφαία δομή και κάθε στοιχείο της σελίδας αντιπροσωπεύεται ως αντικείμενο.

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

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

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

Σύντομη ιστορία του DOM

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

Μόλις τόσο το Netscape’s Navigator όσο και ο Microsoft Internet Explorer κυκλοφόρησαν τις δικές τους εκδόσεις JavaScript, οι προγραμματιστές χρειάστηκαν μια διεπαφή που θα επέτρεπε την πρόσβαση στοιχείων στη σελίδα με αυτές τις γλώσσες δέσμης ενεργειών.

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

Τελικά, το W3C άρχισε να δουλεύει σε μια προδιαγραφή για το XML DOM, που ονομάζεται επίσης το επίπεδο 1 DOM που υποτίθεται ότι ήταν φορητό σε όλα τα προγράμματα περιήγησης.

Έπρεπε επίσης να εργαστεί για οποιαδήποτε γλώσσα προγραμματισμού που θα μπορούσε να χειριστεί έγγραφα XML. Αυτή η προδιαγραφή υιοθετήθηκε ως πρότυπο στα τέλη του 1998. Η τρέχουσα έκδοση είναι το DOM 4, μια Σύσταση του W3C από το 2015.

Δύο απόψεις του DOM

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

Το τμήμα HTML καθορίζει τα συγκεκριμένα στοιχεία HTML και τη λειτουργικότητά τους. Ως εκ τούτου, το DOM θεωρείται ως API και ως αντικείμενο.

DOM ως API

Ως διεπαφή προγραμματισμού εφαρμογών (API), χρησιμοποιείται τόσο για έγγραφα HTML όσο και για έγγραφα XML. Μας δίνει ένα τυπικό σύνολο αντικειμένων που χρησιμοποιούνται σε αυτά τα έγγραφα και χρησιμεύει επίσης ως μοντέλο για το πώς αυτά τα αντικείμενα μπορούν να συνδυαστούν, να προσπελαστούν και να χειριστούν.

DOM ως αντικείμενο

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

  • Οι διεπαφές και τα αντικείμενα που χρησιμοποιούνται για την αναπαράσταση και τον χειρισμό ενός εγγράφου
  • Η συμπεριφορά και τα χαρακτηριστικά τους
  • Οι σχέσεις τους.

Δομή DOM

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

Κάθε κόμβος έχει μια συνάρτηση και μια ταυτότητα και κάθε κόμβος μπορεί επίσης να έχει οποιονδήποτε αριθμό θυγατρικών κόμβων. Οι πιο συνηθισμένοι κόμβοι είναι στοιχεία, κείμενο και χαρακτηριστικά.

Κόμβοι στοιχείων

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

Κόμβοι κειμένου

Οι κόμβοι κειμένου είναι το πραγματικό περιεχόμενο μεταξύ των ετικετών HTML. Συνήθως έχουν έναν γονικό κόμβο και μερικές φορές αδελφικούς κόμβους, αλλά δεν μπορούν να έχουν τους δικούς τους θυγατρικούς κόμβους.

Κόμβοι χαρακτηριστικών

Οι κόμβοι χαρακτηριστικών είναι κάπως ειδικοί. Δεν έχουν έναν γονικό κόμβο, παιδιά ή αδελφικούς κόμβους, αλλά αντ ‘αυτού αντιπροσωπεύουν τα χαρακτηριστικά που ορίζονται σε ετικέτες HTML, όπως το χαρακτηριστικό href στις ετικέτες ή τα χαρακτηριστικά src στις ετικέτες εικόνας.

Ένα νέο χαρακτηριστικό μπορεί να δημιουργηθεί χρησιμοποιώντας το document.createAttribute () και στη συνέχεια μπορείτε να το αντιστοιχίσετε σε έναν κόμβο στοιχείου και να ορίσετε την τιμή του. Ένας άλλος τρόπος αναφοράς χαρακτηριστικών είναι να αποκτήσετε άμεση πρόσβαση στα χαρακτηριστικά ενός στοιχείου χρησιμοποιώντας το getAttribute () και χρησιμοποιώντας τη μέθοδο setAttribute () για να ορίσετε την τιμή του.

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

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

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

Ωστόσο, κάτι τέτοιο θα αλλάξει όλες τις παραμέτρους στυλ του στοιχείου και σε ορισμένες περιπτώσεις, αυτό δεν είναι πρακτικό, ειδικά αν θέλετε να αλλάξετε μόνο μία παράμετρο στυλ.

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

Χρήση του DOM

Δεδομένου ότι κάθε έγγραφο είναι επίσης αντικείμενο, χρησιμεύει ως σημείο εκκίνησης για χειρισμό άλλων κόμβων σε αυτό. Σε αυτούς τους θυγατρικούς κόμβους μπορείτε να έχετε πρόσβαση και να χειριστείτε χρησιμοποιώντας τις ακόλουθες μεθόδους:

  • getElementById ()
  • getElementsByTagName ()
  • createElement ()
  • createAttribute ()
  • createTextNode ().

Μπορείτε επίσης να προσθέσετε δυναμικά, να ενημερώσετε και να καταργήσετε κόμβους χρησιμοποιώντας τις ακόλουθες μεθόδους:

  • ένθετοΠριν ()
  • αντικαταστήστε το παιδί ()
  • αφαίρεση παιδιού ()
  • appendChild ()
  • cloneNode ().

Το DOM συνδέεται απευθείας με HTML, CSS και JavaScript, καθώς αντικατοπτρίζει τις ετικέτες και τα χαρακτηριστικά που καθορίζονται από αυτά τα πρότυπα, καθώς επίσης χρησιμεύει ως API για scripting από την πλευρά του πελάτη.

Πόροι

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

  • JavaScript και η σειρά DOM: πρόκειται για μια πολύ λεπτομερή σειρά σεμιναρίων με μεγάλη λεπτομέρεια σχετικά με τη χρήση JavaScript για χειρισμό του DOM.
  • Tutorials DOM JavaScript: ένα σύνολο διαδραστικών μαθημάτων που σας διδάσκουν πώς να αποκτήσετε πρόσβαση και να χειριστείτε το DOM από το JavaScript. Θεωρείται μια προηγούμενη γνώση της JavaScript, ωστόσο, αξίζει να σημειωθεί ότι δεν χρησιμοποιούνται συγκεκριμένες βιβλιοθήκες.
  • Κόμβοι DOM: μια πολύ λεπτομερής επισκόπηση των κόμβων DOM κατάλληλων για αρχάριους που θέλουν να εξοικειωθούν με το πώς είναι δομημένο το DOM και ποιους κόμβους περιλαμβάνει.
  • JavaScript DOM – Ασκήσεις, Πρακτική, Λύση: ένα σύνολο διαφόρων ασκήσεων που περιλαμβάνουν DOM, από απλές ασκήσεις έως πιο περίπλοκες..
  • Το μοντέλο αντικειμένου εγγράφου W3C (DOM): αυτός ο οδηγός που δημοσιεύθηκε από το W3C προσφέρει μια εισαγωγική και φιλική για αρχάριους επισκόπηση του DOM, την ιστορία και τον τρόπο λειτουργίας του.
  • Εισαγωγή στο DOM: μια σύντομη εννοιολογική εισαγωγή στο DOM που δημοσιεύτηκε από το Mozilla Developer Network, το οποίο εξηγεί πώς παρέχει δομή για έγγραφα HTML και XML και πώς μπορείτε να αποκτήσετε πρόσβαση σε αυτό.
  • W3C DOM4: η τελευταία πρόταση DOM από το W3C που χρονολογείται από το 2015, η οποία περιέχει την επισκόπηση και λεπτομερείς προδιαγραφές για το DOM.
  • Αναφορά DOM: μια εύχρηστη λίστα αναφοράς που δημοσιεύεται από το Δίκτυο προγραμματιστών της Microsoft, συμπεριλαμβανομένων ιδιοτήτων, μεθόδων, εκδηλώσεων και άλλων.

Βιβλία

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

  • DOM Scripting: Web Design with JavaScript and the Document Object Model (2005), από τον Jeremy Keith: αυτό το βιβλίο παρέχει μια γρήγορη και εύκολη αναφορά για όσους δεν είναι ειδικοί σε κώδικα, αλλά θέλουν να μάθουν γρήγορα και να επωφεληθούν από το JavaScript και το DOM για προσθήκη λειτουργικότητα στους ιστότοπούς τους. Περιλαμβάνει πολλά παραδείγματα και καθοδηγεί τους αναγνώστες για την κατασκευή πολλών πραγματικών έργων.
  • Document Object Model (2002), του Joe Marini: ο συγγραφέας αυτού του βιβλίου σάς βοηθά να μάθετε τις έννοιες, το σχεδιασμό, τη θεωρία και την προέλευση του DOM. Σε όλο το βιβλίο, θα χρησιμοποιήσετε το DOM για να ελέγξετε, να πλοηγηθείτε και να χειριστείτε τους κόμβους και το περιεχόμενο ενός εγγράφου. Στη συνέχεια, μάθετε να δημιουργείτε χρήσιμες εφαρμογές που μπορούν εύκολα να μεταφερθούν σε οποιαδήποτε εφαρμογή συμβατή με DOM χωρίς να κωδικοποιήσετε ξανά.
  • DOM Enlightenment: Exploring JavaScript and the Modern DOM (2013), από τον Cody Lindley: με τη βοήθεια αυτού του βιβλίου, θα μάθετε πώς να χειρίζεστε HTML πιο αποτελεσματικά γράφοντας το Document Object Model (DOM) χωρίς να χρησιμοποιήσετε βιβλιοθήκη DOM. Με πολλά εύπεπτα παραδείγματα, ο συγγραφέας σας δίνει μια πλήρη περιγραφή των σύγχρονων εννοιών DOM για να δείξετε πώς λειτουργούν διάφορα αντικείμενα κόμβου.

Πηγαίνετε εμπρός και διασχίστε το DOM

Η κατανόηση του DOM είναι μία από τις βασικές έννοιες για κάθε επίδοξο προγραμματιστή ιστού.

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

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

Περαιτέρω ανάγνωση και πόροι

Έχουμε περισσότερους οδηγούς, σεμινάρια και γραφήματα που σχετίζονται με την κωδικοποίηση και την ανάπτυξη ιστότοπων:

  • Σύνθεση καλής HTML: Πρόκειται για μια σταθερή εισαγωγή στη σύνταξη καλά σχηματισμένου HTML και στη χρήση λογισμικού επικύρωσης HTML.
  • CSS3 – Εισαγωγή, Οδηγοί και Πόροι: αυτό είναι ένα εξαιρετικό μέρος για να ξεκινήσετε να μαθαίνετε τη διάταξη της ιστοσελίδας.
  • Πόροι ASP.NET: αυτός ο οδηγός θα σας οδηγήσει στο πλαίσιο .NET της Microsoft για τη δημιουργία ιστοσελίδων.

HTML για αρχάριους – Ultimate Guide

Αν θέλετε πραγματικά να μάθετε HTML, έχουμε δημιουργήσει ένα άρθρο διάρκειας βιβλίου, HTML για αρχάριους – Ultimate Guide.

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

HTML για αρχάριους - Ultimate Guide
HTML για αρχάριους – Ultimate Guide

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map