תכונת data היא אחת מהתגיות השימושיות ביותר בתקן HTML5 שגם נתמכת באופן מלא מאינטרנט אקספלורר 7 וצפונה (ולפיכך אפשר לעבוד איתה כבר עכשיו) והיא שימושית מאוד עבור כמעט כל מי שכותב סקריפטים מורכבים טיפה ב-JavaScript (אבל עדיין לא מספיק מורכבים שמצריכים פריימוורק).
למי שלא יודע מה זו תכונה – זה הגדרה בתוך תגית HTML שאומרת משהו על התגית. למשל:
<a href="http://www.google.com" title="קישור לגוגל" >Search</a>
כאן יש לנו שתי תכונות (בלעז attribute) אחת היא href והשניה היא title ושתיהן אומרות משהו על התגית. הראשונה מגדירה לאן תגית הקישור מפנה (במקרה הזה לאתר גוגל) והשניה מגדירה את הכותרת של התגית – מה שהגולש יראה אם הוא יעביר את העכבר מעל הקישור.
לא כל תכונה היא בעלת משמעות לגולש – למשל תגית rel או class הן תכונות שאם אנו לא משתמשים בהן על מנת לקבוע עיצוב, הגולש לא יבחין בהן. יש לא מעט מתכנתים שמשתמשים בשתי התכונות האלו על מנת לאחסן מידע. למשל בסקריפט שפותח או סוגר תיבה מסוימת, מקובל להכניס class בשם open במידה והתיבה פתוחה ו-class בשם closed אם התיבה סגורה. יש כאלו שמגדילים לעשות ומכניסים מערכים שלמים לתוך תכונת rel.
חבל, כי כשמכירים את תכונות data וכמה קל להשתמש בה מבינים שלפעמים אחסון מידע בתוך תכונות אחרות או משחקים אחרים שמתכנתים משחקים כדי לאחסן מידע הוא די מיושן וחבל.
ראשית, תכונת data היא תכונה שהשם שלה משתנה בהתאם לתיאור. למשל: data-something או data-myNumbers או כל תיאור אחר שמגיע מיד אחרי ה-data. מה שחשוב הוא ה-data וזה שיש איזושהו טקסט שמסביר אותה. איך זה נראה? ככה:
<div data-my_data_description="some string"></div>
עכשיו אני יכול להכניס איזה מידע שאני רוצה לשם ולקבל אותו באמצעות: getAttribute – למשל אציב div חביב בשם:
<div id="myDiv0" data-my_data_description="some string"></div>
אני יכול לגשת אל תכונת data-my_data_description באמצעות getAttribute כמו כל תכונה אחרת – למשל:
document.getElementById('myDiv0').getAttribute('data-my_data_description')
נסו להכניס את זה לקונסולה שלכם ותראו בעצמכם! כפי שאמרתי – זה עובד בכל הדפדפנים כולל אינטרנט אקספלורר 7.
על מנת לשנות את התכונה, אני יכול להשתמש במתודה setAttribute באופן הבא:
document.getElementById('myDiv0').setAttribute('data-my_data_description', 'Some other string')
הערך של התכונה ישתנה בהתאם. זה כל כך קל ופשוט! 🙂
jQuery data attribute
נשאלת השאלה מה קורה אם אנו רוצים לאחסן אובייקט או מערך. אנחנו יכולים באופן עקרוני להשתמש ב-stringify – כלומר המרה פשוטה יחסית של אובייקט או מערך למחרוזת טקסט. אבל אם אני משתמש ב-jQuery, החיים שלי, כרגיל בכל מה שקשור לטיפול בDOM, הם קלים. על מנת להדגים, אני יוצר אלמנט שבו יש JSON:
<div id="myDiv1" data-my_data_description='{"cool":"Mustang","family":"Station Wagon","big":"SUV"}'></div>
אני אראה איך לגשת למערך הזה בצורה מסודרת. אתם יכולים להעתיק את הקוד לקונסולה ולראות איך זה עובד בקלות! על מנת לגשת לתכונה שלי – כל מה שאני צריך זה
jQuery('#myDiv1').data().my_data_description
שימו לב שזה די דומה ל getAtrribute רק שאני לא משתמש בתחילית -data. אבל אם מכניסים את זה לקונסולה תראו שמה שמוחזר הוא לא מחרוזת טקסט אלא אובייקט שמתנהג בדיוק כמו כל אובייקט ג'אווהסקריפטי אחר! שימו לב! אם אני רוצה לגשת אל אחת מתכונות האובייקט (כמו cool למשל) אני יכול להכניס משהו כזה.
jQuery('#myDiv1').data().my_data_description.cool
אני יכול לשנות חלקים מהאובייקט כרצוני כרגיל – למשל:
jQuery('#myDiv1').data().my_data_description.cool = "Ferarri"
שנו אצלכם ובידקו שוב בקונסולה. איזה כיף. זה עובד גם עם מערכים וחוסך את כאב הראש של stringify.
Native dataset attribute
אם אנחנו לא משתמשים ב-jQuery אבל עדיין רוצים לגשת בצורה נוחה אף יותר מ getAttribute, יש לנו את האפשרות של שימוש בdataset API. הוא עובד באופן די דומה ל-jQuery, רק שהוא בא כחלק מ-JavaScript ועובד יותר מהר. מה הבעיה איתו? כרגיל אקספלורר. כל הגרסאות של אקספלורר 10 ומטה לא עובדות איתו, מה שהופך את השימוש בו ללא ריאלי ללא שימוש ב polyfill מתאים (יש אחד כזה, אך לא השתמשתי בו באפליקציה קיימת). איך משתמשים בו? פשוט ביותר:
document.getElementById('myDiv1').dataset.my_data_description;
זה כמובן לא הופך את הטקסט לאובייקט כמו jQuery.data, אבל זה מאוד נוח. מינוס העובדה שזה לא נתמך בדפדפן התפלץ הכחול שכולנו כל כך אוהבים.
איטרציה בין אובייקטים
ולסיכום, איך עושים איטרציה בין אובייקטים שיש להם את תכונת ה-data? מאוד מאוד פשוט. משתמשים במתודת querySelectorAll.
אם אני רוצה לקבל מערך של כל האובייקטים שיש להם תכונה מסוימת, אני משתמש בזה:
document.querySelectorAll('[data-my_data_description]');
אם אני רוצה לקבל מערך של כל האובייקטים בעלי ערך מסוים, אפשר להשתמש בזה:
document.querySelectorAll("[data-my_data_description='some string']");
זהו, עד כאן בנוגע לתכונה מאוד חשובה, מאוד שימושית, שברוב ה-API שלה אפשר להשתמש כבר היום (מלבד dataset) ושמשחקת ממש ממש יפה עם jQuery.