[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Πανεπιστήμιο του Χάρβαρντ] [Αυτό είναι CS50.] [CS50.TV] Σε αυτό το βίντεο θα πάμε να ρίξουμε μια ματιά στο DOM. Όταν ο browser κατεβάζει μια ιστοσελίδα, θα πρέπει να αναπαρίσταται στη μνήμη με κάποιο τρόπο. Το μοντέλο αντικειμένου εγγράφου, ή DOM, περιγράφει τον τρόπο με τον οποίο το πρόγραμμα περιήγησης αντιπροσωπεύει μια ιστοσελίδα στη μνήμη. Σε αυτό το βίντεο, θα ρίξουμε μια ματιά στο DOM, στο πλαίσιο της JavaScript, αλλά DOM είναι μια γλώσσα ανεξάρτητη έννοια. Για παράδειγμα, η PHP έχει τη δική του υλοποίηση DOM, καθώς και. Ωστόσο, DOM είναι συχνά χρησιμοποιείται με JavaScript δεδομένου JavaScript μας επιτρέπει να αλλάξετε τα περιεχόμενα μιας ιστοσελίδας on the fly, DOM και μας επιτρέπει να αποκτήσετε πρόσβαση σε τμήματα μιας ιστοσελίδας. Ας ρίξουμε μια ματιά σε μια ιστοσελίδα παράδειγμα. Εντάξει, τώρα ας δούμε πώς αυτή η σελίδα θα πρέπει να εκπροσωπούνται στο DOM. Και κάθε δέντρο πρέπει να έχει ένα κόμβο στην κορυφή. Γι 'αυτό το έγγραφο, το στοιχείο HTML είναι η ρίζα επειδή είναι το πρώτο στοιχείο που εμφανίζεται. Ας προσθέσουμε ένα κόμβο στο δέντρο μας. Ας ρίξουμε μια ματιά στο HTML έγγραφο ξανά. Παρατηρήστε ότι η ετικέτα του σώματος είναι ένθετο στο εσωτερικό της HTML ετικέτας. Αυτό σημαίνει ότι το στοιχείο του σώματος είναι ένα παιδί του στοιχείου HTML. Μπορούμε να αναπαραστήσουμε αυτό το DOM δέντρο μας, κάνοντας το σώμα ένα φύλλο κατεβαίνει από την HTML. Ας το κάνουμε αυτό. Έχουμε το σώμα κάτω από HTML. Τώρα μπορούμε να δούμε ότι το σώμα έχει 2 παιδιά της δικής του, το στοιχείο h1 και το στοιχείο ul. Αυτό σημαίνει ότι μπορούμε να συνδέσουμε τα δύο αυτά στοιχεία στο στοιχείο του σώματος, οπότε ας το κάνουμε αυτό. Έχουμε μια h1 και ul. Τέλος, η ul στοιχείο έχει 3 παιδιά και άνω, και αυτό θα ολοκληρώσει DOM δέντρο μας, οπότε ας προσθέσουμε li, li, li. Αυτό ολοκληρώνει DOM δέντρο μας, και αυτό είναι το πώς το πρόγραμμα περιήγησης αποθηκεύει την ιστοσελίδα σας. Τώρα ας ρίξουμε μια ματιά στο πώς μπορούμε να διασχίσει αυτό το δέντρο με τη χρήση JavaScript. Μπορούμε να αποκτήσετε πρόσβαση σε αυτό το δέντρο χρησιμοποιώντας μια ειδική μεταβλητή JavaScript ονομάζεται έγγραφο. Μία ιδιότητα του αντικειμένου εγγράφου είναι η ιδιοκτησία του σώματος, και αυτό το αντικείμενο αντιπροσωπεύει το στοιχείο του σώματος στην ιστοσελίδα παράδειγμά μας. Αν θέλαμε να πάρει όλα τα παιδιά του στοιχείου σώματος, η οποία αν θυμάστε είναι ότι η ετικέτα H1 και το ul ετικέτα, μπορούμε να πούμε document.body.childNodes. Και αυτό θα μας δώσει πίσω ένα array που περιέχει και το στοιχείο h1 και το ul στοιχείο δεδομένου ότι είναι τόσο άμεσα παιδιά του σώματος. Αν θέλαμε να δημιουργήσουμε μια μεταβλητή που αντιπροσωπεύει την ul στοιχείο μπορούμε να πούμε VRR ul = τότε αυτός ο κώδικας εδώ, και τώρα γιατί childNodes είναι απλά μια σειρά μπορούμε δείκτη σε αυτό με το [1] για να πάρει το δεύτερο στοιχείο αυτού του πίνακα. Με αυτό το νέο αντικείμενο ul μπορούμε να αποκτήσετε πρόσβαση σε διάφορες ιδιότητες του στοιχείου όπως το ID της. Αν πούμε ul.id ότι πρόκειται να είναι ίσο με το string Λίστα γιατί αυτό είναι που έχουμε εμείς στην HTML σελίδα μας. Μπορούμε επίσης να πάρετε tagName της, η οποία σε αυτή την περίπτωση θα είναι ποιο τύπο στοιχείου είναι, στην περίπτωση αυτή, ένα ul. Μπορούμε επίσης να πάρετε τη μητρική της ή τον κόμβο πάνω από αυτό, το οποίο σε αυτή την περίπτωση πρόκειται να είναι το στοιχείο του σώματος. Αν πούμε. ParentNode, που πρόκειται να είναι το ίδιο με document.body. Φυσικά, αυτό έχει ul παιδιά της δικής της, ώστε να μπορούμε να πούμε ακόμα. childNodes σε αυτό το στοιχείο, και αυτός ο πίνακας θα πρέπει να έχει τώρα μήκος 3, επειδή υπάρχουν 3 στοιχεία στη λίστα μας. Τέλος, ίσως το πιο χρήσιμο ακίνητο πρόκειται να είναι. InnerHTML, και αυτό θα είναι το πραγματικό περιεχόμενο του καταλόγου, η οποία στο παράδειγμα σελίδας μας ήταν οι 3 ετικέτες li. Φυσικά, αν έχουμε ένα μεγάλο έγγραφο, την πρόσβαση σε στοιχεία με τον τρόπο αυτό πρόκειται να είναι πραγματικά περίπλοκη, διότι τελικά θα έχουμε να πούμε τα πράγματα όπως document.body.childNodes κάτι βραχίονα. childNodes κάτι άλλο στήριγμα, και πρόκειται να πάρει πραγματικά περίπλοκη. Αντ 'αυτού αυτό που πραγματικά θέλουμε να κάνουμε είναι να είναι σε θέση να διερευνούν το έγγραφο, έτσι ακριβώς όπως ψάξαμε για τα πράγματα στο διαδίκτυο χρησιμοποιώντας λέξεις-κλειδιά χρειαζόμαστε πραγματικά κάποιο τρόπο να ψάχνουν το έγγραφο αυτό συνοπτικά να πάρει πίσω μόνο τα στοιχεία που μας νοιάζει χωρίς να διέρχονται ολόκληρη η κορυφή δέντρου προς τα κάτω. Ευτυχώς, σύγχρονα προγράμματα περιήγησης μας επιτρέπουν να το κάνουμε αυτό με μια ειδική λειτουργία που ονομάζεται querySelectorAll, και αυτή η λειτουργία χρειάζεται ένα ενιαίο επιχείρημα αυτό είναι ένα CSS επιλογέα, και πρόκειται να επιστρέψει σε μας όλα τα στοιχεία που ταιριάζουν ότι ο επιλογέας. Αυτό σημαίνει ότι δεν χρειάζεται να μάθουν μια εντελώς νέα σύνταξη για την αναζήτηση του DOM. Αντ 'αυτού μπορείτε να εφαρμόσετε τις γνώσεις που ήδη γνωρίζετε για το CSS επιλογείς. Ας ρίξουμε μια ματιά σε μερικά παραδείγματα από την αναζήτηση του εγγράφου. Αν πούμε querySelectorAll και να περάσει αυτό το string # foo αυτό πρόκειται να μας δώσει πίσω το στοιχείο με το ID foo. Μπορείτε επίσης να πω document.getElementById και να περάσει το string foo χωρίς το hashtag. Θα πάμε για να πάρει πίσω το ίδιο ακριβώς αντικείμενο. Αν, αντίθετα, περνάμε το string. Μπαρ για να document.querySelectorAll θα πάμε για να πάρει πίσω όλα τα στοιχεία με τη γραμμή τάξη. Μπορούμε επίσης να συνδυάσουμε CSS επιλογείς. Αν περνάμε στο string # foo img που θα μας δώσει πίσω όλα τα στοιχεία εικόνας ότι τα παιδιά του στοιχείου με το ID foo. Όπως μπορείτε να δείτε, με το συνδυασμό επιλογείς έχουμε κάποια πραγματικά ισχυρές δυνατότητες αναζήτησης. Αλλά κάτω από την κουκούλα, το DOM είναι πραγματικά ακριβώς ένα δέντρο, και αυτές οι επιλογείς μας επιτρέπουν να αφηρημένα ότι μακριά σε κάποιο βαθμό γιατί δεν είναι πάντα ενδιαφέρονται για το σύνολο της δομής του δέντρου DOM. Αυτό ήταν μια γρήγορη επισκόπηση του DOM, και ευχαριστώ για την ένταξή μας. [CS50.TV]