Αυτή η ανάρτηση θα εξηγήσει τη χρήση των χαρακτηριστικών δεδομένων στο JavaScript.
Πώς να χρησιμοποιήσετε τα χαρακτηριστικά δεδομένων στο JavaScript;
Στο JavaScript, το ' δεδομένα Τα χαρακτηριστικά ” χρησιμοποιούνται για την αποθήκευση επιπλέον πληροφοριών που δεν εμφανίζονται στην ιστοσελίδα. Αυτές οι πληροφορίες μπορούν να γραφτούν, να προσπελαστούν, να διαβαστούν και να αλλάξουν δυναμικά σύμφωνα με τις απαιτήσεις του χρήστη. Αυτή η ενότητα εκτέλεσε την εργασία που συζητήθηκε πρακτικά σε χαρακτηριστικά δεδομένων.
Σύνταξη
< στοιχεία στοιχείων -*= 'κάποια αξία' >
Στην παραπάνω σύνταξη:
- ' στοιχείο ” αντιπροσωπεύει το στοιχείο HTML στο οποίο χρησιμοποιείται το χαρακτηριστικό δεδομένων.
- ' δεδομένα-* Το ” δηλώνει τα πολλαπλά (*) χαρακτηριστικά δεδομένων που ξεκινούν με το πρόθεμα (data-), δηλαδή τη λέξη-κλειδί δεδομένων ακολουθούμενη από μια παύλα.
- κάποια αξία: Καθορίζει την τιμή του χαρακτηριστικού δεδομένων.
Τώρα, χρησιμοποιήστε την παραπάνω σύνταξη για να δημιουργήσετε ένα χαρακτηριστικό δεδομένων.
Δημιουργία Ιδιοτήτων Δεδομένων
< div id = 'myDiv' δεδομένα - όνομα = 'Άλβιν' δεδομένα - ηλικία = '40' δεδομένα - γένος = 'αρσενικός' div >Ο δηλωμένος κώδικας HTML μίας γραμμής δημιουργεί το ακόλουθο ' όνομα δεδομένων ',' ηλικία δεδομένων ', και το ' δεδομένα-φύλο ” χαρακτηριστικά μέσα στο στοιχείο “div” του οποίου το αναγνωριστικό είναι “myDiv”.
Ας διαβάσουμε/να αποκτήσουμε πρόσβαση στα δημιουργημένα χαρακτηριστικά δεδομένων.
Παράδειγμα 1: Ανάγνωση/Πρόσβαση στο χαρακτηριστικό δεδομένων με χρήση της ιδιότητας 'σύνολο δεδομένων'.
Αυτό το παράδειγμα εφαρμόζει την ιδιότητα 'σύνολο δεδομένων' για την ανάγνωση/πρόσβαση στο συγκεκριμένο ή σε όλα τα χαρακτηριστικά δεδομένων.
Πρώτα, κοιτάξτε το ' κουμπί ' στοιχείο που καλεί το ' jsFunc() 'όταν σχετίζεται' στο κλικ ” το συμβάν ενεργοποιείται με το πάτημα του κουμπιού:
< κουμπί κάνοντας κλικ = 'jsFunc()' > Πρόσβαση στο χαρακτηριστικό δεδομένων κουμπί >Τώρα, προχωρήστε στον ορισμό 'jsFunc()':
< γραφή >λειτουργία jsFunc ( ) {
συνθ στοιχείο = έγγραφο. getElementById ( 'myDiv' ) ;
κονσόλα. κούτσουρο ( στοιχείο. σύνολο δεδομένων ) ;
}
γραφή >
Στις παραπάνω γραμμές κώδικα:
- Ο ' jsFunc() ' δηλώνει πρώτα μια μεταβλητή 'elem' που εφαρμόζει το ' document.getElementById() ' μέθοδος πρόσβασης στο προστιθέμενο στοιχείο div μέσω του αναγνωριστικού του 'myDiv'.
- Στη συνέχεια, χρησιμοποιεί το ' console.log() ' μέθοδος που θα χρησιμοποιήσει το ' σύνολο δεδομένων ιδιότητα για πρόσβαση στα χαρακτηριστικά δεδομένων του στοιχείου div στο οποίο έχει προσπελαστεί και εμφάνιση τους στην κονσόλα Ιστού.
Παραγωγή
Πατήστε F12 για να ανοίξετε την κονσόλα Ιστού:
Μπορεί να φανεί ότι κάνοντας κλικ στο συγκεκριμένο κουμπί, η κονσόλα εμφανίζει ένα ' DOMStringMap ” που περιέχει όλα τα χαρακτηριστικά δεδομένων του στοιχείου div.
Πρόσβαση σε συγκεκριμένη τιμή
Εάν ο χρήστης θέλει να αποκτήσει πρόσβαση στο συγκεκριμένο χαρακτηριστικό δεδομένων, τότε καθορίστε το όνομά του με την ιδιότητα 'σύνολο δεδομένων' ως εξής:
< γραφή >λειτουργία παίρνω ( ) {
συνθ στοιχείο = έγγραφο. getElementById ( 'myDiv' ) ;
κονσόλα. κούτσουρο ( στοιχείο. σύνολο δεδομένων . όνομα ) ;
}
γραφή >
Αυτή τη στιγμή, η πρόσβαση στα χαρακτηριστικά δεδομένων 'όνομα' γίνεται χρησιμοποιώντας το ' σύνολο δεδομένων ” ιδιοκτησία.
Παραγωγή
Μπορεί να φανεί ότι η κονσόλα εμφανίζει την τιμή των καθορισμένων χαρακτηριστικών δεδομένων μόνο όταν κάνετε κλικ στο κουμπί.
Παράδειγμα 2: Ανάγνωση/Πρόσβαση στο χαρακτηριστικό δεδομένων με χρήση της μεθόδου 'getAttribute()'
Αυτό το παράδειγμα χρησιμοποιεί τη μέθοδο 'getAttribute()' για την ανάγνωση/πρόσβαση στα χαρακτηριστικά δεδομένων.
Σε αυτό το σενάριο, περιλαμβάνεται επίσης το στοιχείο κουμπιού του πρώτου παραδείγματος:
< κουμπί κάνοντας κλικ = 'jsFunc()' > Πρόσβαση στο χαρακτηριστικό δεδομένων κουμπί >Ας δούμε τη λειτουργικότητα της μεθόδου 'getAttribute()':
< γραφή >λειτουργία jsFunc ( ) {
συνθ στοιχείο = έγγραφο. getElementById ( 'myDiv' ) ;
κονσόλα. κούτσουρο ( στοιχείο. getAttribute ( 'όνομα δεδομένων' ) ) ;
κονσόλα. κούτσουρο ( στοιχείο. getAttribute ( 'ηλικία δεδομένων' ) ) ;
κονσόλα. κούτσουρο ( στοιχείο. getAttribute ( 'δεδομένα-φύλο' ) ) ;
}
γραφή >
Στο παραπάνω απόσπασμα κώδικα:
- Η μεταβλητή 'elem' εφαρμόζει το ' document.getElementById() ' μέθοδος πρόσβασης στο προστιθέμενο στοιχείο div χρησιμοποιώντας το αναγνωριστικό του 'myDiv'.
- Στη συνέχεια, το « console.log() 'η μέθοδος χρησιμοποιεί το ' getAttribute() ' μέθοδος για να λάβετε την καθορισμένη τιμή χαρακτηριστικού 'data' του στοιχείου div που ανακτήθηκε και στη συνέχεια να το εμφανίσετε στην κονσόλα Ιστού.
- Η ίδια εργασία εκτελείται για την πρόσβαση στα υπόλοιπα καθορισμένα χαρακτηριστικά δεδομένων.
Σημείωση: Η μέθοδος 'getAttribute()' καθορίζει το χαρακτηριστικό δεδομένων με το πρόθεμα 'data' ακολουθούμενο από μια παύλα(-) δηλαδή (data-) που δεν απαιτείται κατά τη χρήση της ιδιότητας 'dataset()'.
Παραγωγή
Η παραπάνω έξοδος εμφανίζει όλες τις καθορισμένες τιμές χαρακτηριστικών δεδομένων όταν κάνετε κλικ στο κουμπί.
Παράδειγμα 3: Γράψτε ένα χαρακτηριστικό δεδομένων χρησιμοποιώντας την ιδιότητα 'σύνολο δεδομένων'.
Αυτό το παράδειγμα γράφει τα χαρακτηριστικά δεδομένων χρησιμοποιώντας την ιδιότητα 'σύνολο δεδομένων'.
Το περιεχόμενο του στοιχείου κουμπιού αλλάζει σύμφωνα με το τρέχον σενάριο:
< κουμπί κάνοντας κλικ = 'jsFunc()' > Γράψτε Χαρακτηριστικό Δεδομένων κουμπί >Τώρα, γράψτε το νέο χαρακτηριστικό δεδομένων στο προστιθέμενο στοιχείο div:
< γραφή >λειτουργία jsFunc ( ) {
συνθ στοιχείο = έγγραφο. getElementById ( 'myDiv' ) ;
στοιχείο. σύνολο δεδομένων . ταυτότητα = 'πρόσωπο'
κονσόλα. κούτσουρο ( στοιχείο. σύνολο δεδομένων ) ;
}
γραφή >
Στο παραπάνω μπλοκ κώδικα:
- Ο ' σύνολο δεδομένων Η ιδιότητα γράφει ένα νέο όνομα χαρακτηριστικού δεδομένων 'id' με μια καθορισμένη τιμή συμβολοσειράς.
- Στη συνέχεια, το « conolse.log() ' χρησιμοποιεί την ιδιότητα 'σύνολο δεδομένων' για να εμφανίσει τη διεπαφή 'DOMStringMap' που περιέχει το νέο χαρακτηριστικό δεδομένων στην κονσόλα Ιστού.
Παραγωγή
Εδώ, η κονσόλα εμφανίζει το 'DOMStringMap' που περιέχει το νέο χαρακτηριστικό δεδομένων 'id' γραμμένο χρησιμοποιώντας την ιδιότητα 'dataset'.
Παράδειγμα 4: Ενημέρωση τιμής χαρακτηριστικού δεδομένων
Αυτό το παράδειγμα ενημερώνει την υπάρχουσα τιμή ενός συγκεκριμένου χαρακτηριστικού δεδομένων με τη βοήθεια της ιδιότητας 'σύνολο δεδομένων'.
Το κείμενο του στοιχείου κουμπιού αλλάζει σύμφωνα με το δεδομένο σενάριο:
< κουμπί κάνοντας κλικ = 'jsFunc()' > Ενημέρωση χαρακτηριστικού δεδομένων κουμπί >Τώρα, προχωρήστε στην ενότητα JavaScript:
< γραφή >λειτουργία jsFunc ( ) {
συνθ στοιχείο = έγγραφο. getElementById ( 'myDiv' ) ;
στοιχείο. σύνολο δεδομένων . όνομα = 'Γιάννης'
κονσόλα. κούτσουρο ( στοιχείο. σύνολο δεδομένων . όνομα ) ;
}
γραφή >
Στο παραπάνω μπλοκ κώδικα, η καθορισμένη τιμή χαρακτηριστικού δεδομένων 'όνομα' ενημερώνεται με τη βοήθεια του ' σύνολο δεδομένων ” ιδιοκτησία.
Παραγωγή
Η κονσόλα εμφανίζει την ενημερωμένη τιμή των καθορισμένων χαρακτηριστικών δεδομένων όταν κάνετε κλικ στο κουμπί.
Παράδειγμα 5: Διαγραφή χαρακτηριστικού δεδομένων
Αυτό το παράδειγμα διαγράφει το συγκεκριμένο χαρακτηριστικό δεδομένων χρησιμοποιώντας τη λέξη-κλειδί 'διαγραφή'.
Το κείμενο του στοιχείου κουμπιού αλλάζει σύμφωνα με την απαίτηση:
< κουμπί κάνοντας κλικ = 'jsFunc()' > Διαγραφή χαρακτηριστικού δεδομένων κουμπί >Τώρα, ακολουθήστε το μπλοκ κώδικα JavaScript:
< γραφή >λειτουργία jsFunc ( ) {
συνθ στοιχείο = έγγραφο. getElementById ( 'myDiv' ) ;
διαγραφή στοιχείου. σύνολο δεδομένων . ηλικία ;
κονσόλα. κούτσουρο ( στοιχείο. σύνολο δεδομένων . ηλικία ) ;
}
γραφή >
Το παραπάνω απόσπασμα κώδικα καθορίζει το ' διαγράφω ' λέξη-κλειδί με την ιδιότητα 'σύνολο δεδομένων' για να διαγράψετε το χαρακτηριστικό δεδομένων πρόσβασης.
Παραγωγή
Παρατηρείται ότι η κονσόλα δείχνει « απροσδιόριστος ' σε ένα κλικ στο κουμπί που επαληθεύει ξεκάθαρα ότι το χαρακτηριστικό δεδομένων πρόσβασης έχει διαγραφεί.
συμπέρασμα
Στο JavaScript, τα χαρακτηριστικά δεδομένων μπορούν να χρησιμοποιηθούν με διάφορους τρόπους, όπως ανάγνωση, πρόσβαση, εγγραφή, ενημέρωση και διαγραφή τους σύμφωνα με τις απαιτήσεις. Όλες αυτές οι εργασίες μπορούν να εκτελεστούν με τη βοήθεια του ενσωματωμένου ' σύνολο δεδομένων ” ιδιοκτησία. Ωστόσο, ο χρήστης μπορεί επίσης να έχει πρόσβαση στο χαρακτηριστικό δεδομένων ένα προς ένα με τη βοήθεια του ' getAttribute() 'μέθοδος. Αυτή η ανάρτηση έχει ουσιαστικά εξηγήσει τη χρήση των χαρακτηριστικών δεδομένων στο JavaScript.