Αυτός ο οδηγός θα επεξηγήσει τον τρόπο πρόσβασης και χειρισμού της ιδιότητας «textContent» του στοιχείου HTML DOM στο JavaScript.
Αρχικά, ρίξτε μια ματιά στα βασικά της ιδιότητας 'textContent' HTML DOM.
Τι είναι η ιδιότητα «textContent» HTML DOM σε JavaScript;
Ο ' περιεχόμενο κειμένου ” είναι η ενσωματωμένη ιδιότητα που ορίζει, ανακτά και τροποποιεί το κείμενο ενός καθορισμένου στοιχείου ή κόμβου συμπεριλαμβανομένων όλων των απογόνων του. Οι απόγονοι είναι θυγατρικά στοιχεία όπως , , και πολλά άλλα που χρησιμοποιούνται για σκοπούς μορφοποίησης. Κατά τη ρύθμιση του κειμένου χρησιμοποιώντας την ιδιότητα 'textContent', οι απόγονοι του στοχευόμενου στοιχείου αντικαθίστανται πλήρως με το νέο κείμενο.
Σύνταξη (Ορισμός περιεχομένου κειμένου)
Η βασική σύνταξη για να ορίσετε το κείμενο ενός στοιχείου/κόμβου χρησιμοποιώντας το ' περιεχόμενο κειμένου Η ιδιοκτησία γράφεται παρακάτω:
στοιχείο. περιεχόμενο κειμένου = κείμενο | κόμβος. περιεχόμενο κειμένου = κείμενο
Η παραπάνω σύνταξη παίρνει το επιθυμητό ' κείμενο ” ως τιμή που θέλει να ορίσει ο χρήστης για ένα στοιχείο ή κόμβο.
Σύνταξη (Λήψη περιεχομένου κειμένου)
Η γενικευμένη σύνταξη για την επιστροφή του κειμένου ενός στοιχείου ή κόμβου μέσω του ' περιεχόμενο κειμένου ” το ακίνητο αναφέρεται εδώ:
στοιχείο. περιεχόμενο κειμένου | κόμβος. περιεχόμενο κειμένουΑξία επιστροφής: Ο ' περιεχόμενο κειμένου 'η ιδιοκτησία επιστρέφει το ' κείμενο ' ενός στοιχείου ή κόμβου με διάστιχο αλλά χωρίς τις εσωτερικές του ετικέτες HTML.
Τώρα χρησιμοποιήστε πρακτικά τις συντακτικές που ορίζονται παραπάνω για να αποκτήσετε πρόσβαση και να χειριστείτε την ιδιότητα 'textContent'.
Πώς να αποκτήσετε πρόσβαση και να χειριστείτε την ιδιότητα «textContent» του στοιχείου HTML DOM στο JavaScript;
Παρόμοια με τις ιδιότητες 'innerHTML' και 'innerText', το ' περιεχόμενο κειμένου Η ιδιότητα ” επιτρέπει επίσης στους χρήστες να ορίζουν, να έχουν πρόσβαση και να τροποποιούν το κείμενο του επιθυμητού στοιχείου εύκολα. Αυτή η ενότητα εκτελεί όλες αυτές τις λειτουργίες σε ένα στοιχείο χρησιμοποιώντας τα παρακάτω παραδείγματα.
Παράδειγμα 1: Εφαρμογή της ιδιότητας 'textContent' για πρόσβαση στο κείμενο στοιχείου/κόμβου
Αυτό το παράδειγμα εφαρμόζει την ιδιότητα 'textContent' για να επιστρέψει το κείμενο ενός συγκεκριμένου στοιχείου ή κόμβου συμπεριλαμβανομένων όλων των θυγατρικών του.
Κώδικας HTML
< div ταυτότητα = 'myDiv' επί του ποντικιού = 'getText()' στυλ = 'περίγραμμα: 3 εικονοστοιχεία συμπαγές μαύρο; πλάτος: 400 εικονοστοιχεία; γέμιση: 5 εικονοστοιχεία 5 εικονοστοιχεία; περιθώριο: αυτόματο;' >< h1 > Πρώτη Επικεφαλίδα < / h1 >
< h2 > Δεύτερη Επικεφαλίδα < / h2 >
< h3 > Τρίτη Επικεφαλίδα < / h3 >
< h4 > Τέταρτη Επικεφαλίδα < / h4 >
< h5 > Πέμπτη Επικεφαλίδα < / h5 >
< h6 > Έκτη Επικεφαλίδα < / h6 >
< / div >
Στις παραπάνω γραμμές κώδικα HTML:
- Ο ' Η ετικέτα με αναγνωριστικό 'myDiv' δημιουργεί ένα στοιχείο div που έχει στυλ με τις ακόλουθες ιδιότητες περίγραμμα, πλάτος, padding (πάνω και κάτω, αριστερά και δεξιά) και περιθώριο. Επισυνάπτει επίσης το « επί του ποντικιού ' γεγονός που επικαλείται το ' getText() Λειτουργεί όταν ο χρήστης τοποθετεί το ποντίκι πάνω του.
- Μέσα στο div, όλες οι καθορισμένες ετικέτες επικεφαλίδας (h1, h2, h3, h4, h5 και h6) εισάγουν τα στοιχεία επικεφαλίδας σύμφωνα με τα καθορισμένα επίπεδά τους.
Κώδικας JavaScript
< γραφή >
συνάρτηση getText ( ) {
ήταν ελέμ = έγγραφο. getElementById ( 'myDiv' ) ;
συναγερμός ( στοιχείο. περιεχόμενο κειμένου ) ;
}
γραφή >Στο παραπάνω γραμμένο μπλοκ κώδικα JavaScript:
- Ορίστε μια συνάρτηση με το όνομα ' getText() '.
- Μέσα σε αυτή τη συνάρτηση, η μεταβλητή 'elem' εφαρμόζει το ' getElementById() ' μέθοδος πρόσβασης στο στοιχείο div μέσω του αναγνωριστικού του.
- Ο ' συναγερμός() Η μέθοδος ' δημιουργεί ένα πλαίσιο ειδοποίησης που χρησιμοποιεί το ' περιεχόμενο κειμένου ιδιότητα για να επιστρέψετε το κείμενο του γονικού div μαζί με όλα τα εξαρτώμενα μέλη του.
Παραγωγή
Στην παρακάτω έξοδο εμφανίζεται ένα πλαίσιο ειδοποίησης που δείχνει το περιεχόμενο κειμένου του στοιχείου div:
Παράδειγμα 2: Εφαρμογή της ιδιότητας 'textContent' για την αντικατάσταση ενός στοιχείου περιεχομένου κειμένου συμπεριλαμβανομένων των απογόνων του
Αυτό το παράδειγμα δείχνει πώς η ιδιότητα 'textContent' αντικαθιστά όλα τα θυγατρικά ενός στοιχείου ενώ τροποποιεί το κείμενό του.
Κώδικας HTML
< κέντρο >
< h1 id = 'το κεφάλι μου' στο κλικ = 'modifyText()' >< σι > Αυτό σι > είναι < σπιθαμή > Επικεφαλίδα < σπιθαμή > < Εγώ > Στοιχείο Εγώ h1 >
κέντρο >Στις παραπάνω γραμμές κώδικα:
- Ο ' Η ετικέτα ' προσθέτει ένα στοιχείο επικεφαλίδας επιπέδου 1 με συνημμένο ' στο κλικ ' γεγονός που επικαλείται το ' modifyText() Λειτουργεί όταν ο χρήστης κάνει κλικ σε αυτό.
- Το στοιχείο επικεφαλίδας περιέχει επίσης το ' ',' ', και ' ” ετικέτες ως απόγονοί του. Η ετικέτα ' ' χρησιμοποιείται για την έντονη γραφή της συμβολοσειράς που περικλείεται, η ετικέτα '' χωρίς καμία ιδιότητα styling χρησιμοποιείται για να μην εφαρμοστεί στυλ στη δεδομένη συμβολοσειρά και η ετικέτα ' ' χρησιμοποιείται για την εμφάνιση της καθορισμένη συμβολοσειρά ως πλάγια γραφή.
Κώδικας JavaScript
< γραφή >
όπου h1 = έγγραφο. getElementById ( 'το κεφάλι μου' ) ;
κονσόλα. κούτσουρο ( h1 ) ;
λειτουργία modifyText ( ) {
h1. περιεχόμενο κειμένου = 'Καλώς ήρθατε στο Linuxhint!' ;
κονσόλα. κούτσουρο ( h1 )
}
γραφή >Στον παραπάνω κώδικα JavaScript:
- Η μεταβλητή 'h1' χρησιμοποιεί το ' document.getElementById() ' μέθοδος πρόσβασης στο στοιχείο επικεφαλίδας μέσω του εκχωρημένου αναγνωριστικού.
- Ο ' console.log() Η μέθοδος ' εμφανίζει το στοιχείο επικεφαλίδας στο οποίο έχει πρόσβαση στην κονσόλα πριν αλλάξει το περιεχόμενό του.
- Η συνάρτηση με το όνομα ' modifyText() 'χρησιμοποιεί το ' περιεχόμενο κειμένου ιδιότητα για την τροποποίηση του κειμένου του στοιχείου επικεφαλίδας που ανακτήθηκε.
- Η τελευταία μέθοδος 'console.log()' εμφανίζει ξανά την τιμή 'h1' μετά την τροποποίηση.
Παραγωγή
Η κονσόλα δείχνει ξεκάθαρα ότι όλα τα θυγατρικά του δεδομένου στοιχείου επικεφαλίδας έχουν αντικατασταθεί με το νέο καθορισμένο κείμενο, κάνοντας κλικ σε αυτό:
Παράδειγμα 3: Εφαρμογή της ιδιότητας 'textContent' για την τροποποίηση του κειμένου του στοιχείου Child
Αυτό το παράδειγμα χρησιμοποιεί την ιδιότητα 'textContent' για να τροποποιήσει το κείμενο του θυγατρικού του συγκεκριμένου στοιχείου.
Κώδικας HTML
< div ταυτότητα = 'myDiv' στυλ = 'περίγραμμα: 3 εικονοστοιχεία συμπαγές μαύρο; πλάτος: 400 εικονοστοιχεία; γέμιση: 5 εικονοστοιχεία 5 εικονοστοιχεία; περιθώριο: αυτόματο;' >
< κέντρο >
< κουμπί ταυτότητα = 'btn' επί του ποντικιού = 'changeText()' > Παλιό κουμπί < / κουμπί >
< / κέντρο >
< / div >Σε αυτό το σενάριο:
- Το στοιχείο 'div' έχει ένα στοιχείο 'κουμπί' που δημιουργείται με τη βοήθεια του '
ετικέτα '. - Το στοιχείο του κουμπιού περιέχει περαιτέρω ένα εκχωρημένο αναγνωριστικό και ένα ' επί του ποντικιού ' εκδήλωση που καλεί ' changeText() Λειτουργεί όταν το ποντίκι αιωρείται πάνω του.
Κώδικας JavaScript
< γραφή >
ήταν το parentElement = έγγραφο. getElementById ( 'myDiv' ) ;
var στόχος = έγγραφο. getElementById ( 'btn' ) ;
ήταν find_me = γονικό στοιχείο. περιέχει ( στόχος ) ;
αν ( γονικό στοιχείο. περιέχει ( στόχος ) == αληθής ) {
κονσόλα. κούτσουρο ( βρες με ) ;
λειτουργία changeText ( ) {
στόχος. περιεχόμενο κειμένου = 'Νέο κουμπί' ;
}
} αλλού {
κονσόλα. κούτσουρο ( 'Δεν υπάρχει' )
}
γραφή >Στο παραπάνω απόσπασμα κώδικα:
- Η μεταβλητή 'parentElement' εφαρμόζει το ' getElementById() ' μέθοδο πρόσβασης στο γονικό στοιχείο div. Η μεταβλητή 'target' χρησιμοποιεί επίσης τη μέθοδο 'getElementById()' για να ανακτήσει το προστιθέμενο στοιχείο κουμπιού χρησιμοποιώντας το αναγνωριστικό του.
- Η μεταβλητή 'find_me' χρησιμοποιεί το ' περιέχει() ” μέθοδος για να ελέγξετε εάν το στοιχείο στοχευμένου κουμπιού είναι το παιδί του div ή όχι. Αυτή η μέθοδος θα επιστρέψει ' αληθής 'για 'ναι' αλλιώς 'ψευδή'.
- Ο ' αν-αλλιώς Η δήλωση ορίζει ένα μπλοκ κώδικα.
- Εάν το στοχευόμενο στοιχείο είναι το θυγατρικό του γονικού στοιχείου, τότε το ' changeText() Η λειτουργία ' θα αλλάξει το κείμενό της μέσω του ' περιεχόμενο κειμένου ” ιδιοκτησία. Διαφορετικά, το μπλοκ κώδικα 'άλλο' θα εκτελεστεί για να εμφανίσει το καθορισμένο μήνυμα χρησιμοποιώντας το ' console.log() 'μέθοδος.
Παραγωγή
Η κονσόλα εμφανίζει ένα ' αληθής Η δυαδική τιμή που επαληθεύει το στοιχείο του κουμπιού είναι το θυγατρικό του δεδομένου div και, στη συνέχεια, το κείμενό του αλλάζει όταν τοποθετείτε το ποντίκι πάνω του:
Διαφορά μεταξύ textContent, innerText και innerHTML Properties;
Γενικά, το « περιεχόμενο κειμένου ',' innerText ', και ' innerHTML Οι ιδιότητες ασχολούνται με το κείμενο ενός στοιχείου ή κόμβου στον τρόπο ρύθμισης και λήψης του. Ωστόσο, αυτές οι ιδιότητες διαφέρουν μεταξύ τους με βάση ορισμένους παράγοντες. Αυτή η ενότητα επισημαίνει τις κύριες διαφορές μεταξύ όλων:
Οροι 'Περιεχόμενο κειμένου' 'εσωτερικό κείμενο' 'innerHTML' Τύπος επιστροφής Επιστρέφει το κείμενο ενός στοιχείου, συμπεριλαμβανομένων όλων των θυγατρικών του (ετικέτες μορφοποίησης), κρυφό κείμενο CSS και χώρο. Δεν επιστρέφει τις ετικέτες HTML ενός στοιχείου. Επιστρέφει το περιεχόμενο κειμένου του στοχευμένου στοιχείου HTML με όλα τα παιδιά του (ετικέτες μορφοποίησης). Δεν επιστρέφει χώρο, κρυφό κείμενο CSS και ετικέτες HTML εκτός από τα