HTML DOM: Τρόπος χρήσης του μοντέλου αντικειμένου εγγράφου

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

• Έννοια DOM HTML
• Τι είναι το HTML DOM
• Τι ΔΕΝ είναι το HTML DOM
• Από πού προήλθε το DOM
• Ιδιότητες του HTML DOM
• Εύρεση στοιχείων HTML

Έννοια DOM HTML

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

μάθετε pl sql online δωρεάν

• Αντικείμενο παραθύρου & μείον Κορυφή της ιεραρχίας. Είναι το ανώτατο στοιχείο της ιεραρχίας του αντικειμένου.
• Αντικείμενο εγγράφου & μείον Κάθε έγγραφο HTML που φορτώνεται σε ένα παράθυρο γίνεται αντικείμενο εγγράφου. Το έγγραφο περιέχει τα περιεχόμενα της σελίδας.
• Αντικείμενο φόρμας & μείον Ό, τι περικλείεται στις… ετικέτες ορίζει το αντικείμενο φόρμας.
• Στοιχεία ελέγχου φόρμας & μείον Το αντικείμενο φόρμας περιέχει όλα τα στοιχεία που ορίζονται για αυτό το αντικείμενο, όπως πεδία κειμένου, κουμπιά, κουμπιά επιλογής και πλαίσια ελέγχου.

Τι είναι το HTML DOM

Το μοντέλο αντικειμένου εγγράφου είναι ένα API προγραμματισμού για έγγραφα. Το ίδιο το μοντέλο αντικειμένου μοιάζει πολύ με τη δομή των εγγράφων που διαμορφώνει. Για παράδειγμα, σκεφτείτε αυτόν τον πίνακα, που έχει ληφθεί από ένα έγγραφο HTML:

 
 
 
Shady Grove
 
αιολικός
 
 
 
Πάνω από τον ποταμό, Τσάρλι
 
Ντόριαν
 
    

Τι ΔΕΝ είναι το HTML DOM

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

Παρόλο που το μοντέλο αντικειμένου εγγράφου επηρεάστηκε έντονα από το δυναμικό HTML, στο επίπεδο 1, δεν εφαρμόζει όλο το δυναμικό HTML. Συγκεκριμένα, τα συμβάντα δεν έχουν ακόμη καθοριστεί. Το επίπεδο 1 έχει σχεδιαστεί για να θέσει μια σταθερή βάση για αυτό το είδος λειτουργικότητας παρέχοντας ένα στιβαρό, ευέλικτο μοντέλο του ίδιου του εγγράφου.

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

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

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

Το μοντέλο αντικειμένου εγγράφου δεν ορίζει την «πραγματική εσωτερική σημασιολογία» των XML ή HTML. Η σημασιολογία αυτών των γλωσσών καθορίζεται από τις ίδιες τις γλώσσες.

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

Το μοντέλο αντικειμένου εγγράφου, παρά το όνομά του, δεν είναι ανταγωνιστής του Component Object Model (COM). Το COM, όπως το CORBA, είναι ένας ανεξάρτητος από τη γλώσσα τρόπος προσδιορισμού διεπαφών και αντικειμένων, το Document Object Model είναι ένα σύνολο διεπαφών και αντικειμένων που έχουν σχεδιαστεί για τη διαχείριση εγγράφων HTML και XML. Το DOM μπορεί να είναιυλοποιείται χρησιμοποιώντας ανεξάρτητα από τη γλώσσα συστήματα, όπως το COM ή το CORBA, μπορεί επίσης να εφαρμοστεί χρησιμοποιώντας συγκεκριμένες γλώσσες συνδέσεις όπως οι συνδέσεις Java ή ECMAScript που καθορίζονται σε αυτό το έγγραφο.

Από πού προήλθε το μοντέλο αντικειμένου εγγράφου

Το μοντέλο αντικειμένου εγγράφου δημιουργήθηκε ως προδιαγραφή για να επιτρέψει σενάρια JavaScript και προγράμματα Java να είναι φορητά μεταξύ των προγραμμάτων περιήγησης ιστού. Το Dynamic HTML ήταν ο άμεσος πρόγονος του μοντέλου αντικειμένου εγγράφου και αρχικά θεωρήθηκε σε μεγάλο βαθμό από την άποψη των προγραμμάτων περιήγησης.

Ωστόσο, όταν δημιουργήθηκε η Ομάδα Εργασίας Μοντέλου Αντικειμένου Εγγράφου, ενώθηκε επίσης από προμηθευτές σε άλλους τομείς, συμπεριλαμβανομένων των επεξεργαστών HTML ή XML και των αποθετηρίων εγγράφων. Αρκετοί από αυτούς τους προμηθευτές είχαν συνεργαστεί με την SGML πριν από την ανάπτυξη της XML ως αποτέλεσμα, το μοντέλο αντικειμένου εγγράφου έχει επηρεαστεί από το SGML Groves και το πρότυπο HyTime. Μερικοί από αυτούς τους προμηθευτές είχαν επίσης αναπτύξει τα δικά τους μοντέλα αντικειμένων για έγγραφα προκειμένου να παρέχουνAPI προγραμματισμού για επεξεργαστές SGML / XML ή αποθετήρια εγγράφων και αυτά τα μοντέλα αντικειμένων επηρέασαν επίσης το μοντέλο αντικειμένου εγγράφου.

Ιδιότητες του HTML DOM

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

1. Αντικείμενο παραθύρου: Το αντικείμενο παραθύρου βρίσκεται πάντα στην κορυφή της ιεραρχίας.
2. Αντικείμενο εγγράφου: Όταν ένα έγγραφο HTML φορτώνεται σε ένα παράθυρο, γίνεται αντικείμενο εγγράφου.
3. Αντικείμενο φόρμας: Αντιπροσωπεύεται από μορφή ετικέτες.
4. Αντικείμενα σύνδεσης: Αντιπροσωπεύεται από Σύνδεσμος ετικέτες.
5. Αντικείμενα αγκύρωσης: Αντιπροσωπεύεται από ένα href ετικέτες.
6. Στοιχεία ελέγχου φόρμας: Η φόρμα μπορεί να έχει πολλά στοιχεία ελέγχου όπως πεδία κειμένου, κουμπιά, κουμπιά επιλογής και πλαίσια ελέγχου κ.λπ.

Μέθοδοι αντικειμένου εγγράφου :

1. εγγραφή ('string'): γράφει τη δεδομένη συμβολοσειρά στο έγγραφο.
2. getElementById (): επιστρέφει το στοιχείο που έχει τη δεδομένη τιμή αναγνωριστικού.
3. getElementsByName (): επιστρέφει όλα τα στοιχεία που έχουν τη δεδομένη τιμή ονόματος.
4. getElementsByTagName (): επιστρέφει όλα τα στοιχεία που έχουν το δεδομένο όνομα ετικέτας.
5. getElementsByClassName (): επιστρέφει όλα τα στοιχεία που έχουν το δεδομένο όνομα κλάσης.

Εύρεση στοιχείων HTML

Όταν θέλετε να αποκτήσετε πρόσβαση σε στοιχεία HTML με JavaScript, πρέπει πρώτα να βρείτε τα στοιχεία.

στο python, χρησιμοποιείται η μέθοδος __init__ μιας κλάσης

Υπάρχουν δύο τρόποι για να το κάνετε αυτό:

• Εύρεση στοιχείων HTML ανά αναγνωριστικό
• Εύρεση στοιχείων HTML ανά όνομα ετικέτας
• Εύρεση στοιχείων HTML ανά όνομα τάξης

Εύρεση στοιχείου HTML ανά αναγνωριστικό

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

Παράδειγμα

Εύρεση στοιχείων HTML ανά όνομα ετικέτας

Αυτό το παράδειγμα βρίσκει το στοιχείο με id = 'main' και μετά βρίσκει όλα

στοιχεία μέσα στο «κύριο»:

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

Ρίξτε μια ματιά στο δικό μας που έρχεται με ζωντανή εκπαίδευση με καθοδήγηση εκπαιδευτή και πραγματική εμπειρία έργου. Αυτή η εκπαίδευση σας κάνει ικανό σε δεξιότητες για να εργαστείτε με τεχνολογίες ιστού back-end και front-end. Περιλαμβάνει εκπαίδευση σε Web Development, jQuery, Angular, NodeJS, ExpressJS και MongoDB.

Έχετε μια ερώτηση για εμάς; Αναφέρετέ το στην ενότητα σχολίων του ιστολογίου 'HTML Images' και θα επικοινωνήσουμε μαζί σας.