Για ποιο λόγο συνιστάται η χρήση των χαρακτηριστικών data στο HTML;

Τα χαρακτηριστικά data-* χρησιμοποιούνται για την αποθήκευση αυθαίρετων δεδομένων που σχετίζονται με ένα συγκεκριμένο στοιχείο HTML, χωρίς την ανάγκη χρήσης μη τυπικών χαρακτηριστικών ή ιδιοτήτων DOM.

Κύρια πλεονεκτήματα:

• Σημαντικά σωστά: Είναι μέρος του προτύπου HTML5 και δεν παραβιάζουν την εγκυρότητα του εγγράφου.
• Εύκολη πρόσβαση: Η πρόσβαση στα δεδομένα γίνεται μέσω της ιδιότητας dataset στη JavaScript, η οποία επιστρέφει ένα αντικείμενο με κλειδιά που αντιστοιχούν στα μέρη του χαρακτηριστικού μετά το data-.
• Βολικό για JavaScript/CSS: Επιτρέπουν να συνδέσετε ορισμένα δεδομένα με στοιχεία, τα οποία μπορούν στη συνέχεια να χρησιμοποιηθούν στη λογική JavaScript ή για στυλ στο CSS (με τη χρήση επιλεκτών χαρακτηριστικών).
• Διαχωρισμός δεδομένων και παρουσίασης: Βοηθούν στο διαχωρισμό της δομής HTML από τα δεδομένα, που μπορούν να χρησιμοποιηθούν για συμπεριφορά ή παρουσίαση.

Παραδείγματα χρήσης:

• Αποθήκευση του ID μιας εγγραφής στη βάση δεδομένων.
• Αποθήκευση παραμέτρων για ένα αναδυόμενο παράθυρο ή διάλογο.
• Ορισμός της κατάστασης ενός στοιχείου (π.χ., data-state="active").
• Μεταφορά μικρών όγκων δεδομένων από το backend στο frontend για χρήση στη JavaScript.

Παράδειγμα πρόσβασης στη JavaScript:

// HTML: <div id="myElement" data-id="123" data-category="electronics"></div>
const element = document.getElementById('myElement');
const id = element.dataset.id; // Πρόσβαση στην τιμή "123"
const category = element.dataset.category; // Πρόσβαση στην τιμή "electronics"