מאפייני ה- *-data החדשים ב- HTML5 מאפשרים לנו לשמור מידע חופשי על אלמנטים ב- HTML ולעשות בהם שימוש בלוגיקה של האתר (לרוב ה- JavaScript). בפוסט הזה נראה איך עשינו את זה עד היום, נבין למה זה לא היה מוצלח ונבין לעומק את הפיתרון ב- HTML5.

איך אנחנו עושים את זה היום?

את האמת – נכון שיצא לכם פעם להשתמש ב- CSS Classes או במאפיינים לא סטנדרטים של אלמנטים כדי לשמור עליהם מידע ולהשתמש בו בקוד JavaScript?

לדוגמא, נניח שאנחנו רוצים להציג מאפיינים של רכב ב- div כלשהו, ולשמור מידע כלשהו על הרכב. עד היום היינו מוסיפים מאפיינים חופשיים לאלמנטי HTML:

<div id="car" brand="mazda" model="3">
  Guy is very happy with his Mazda 3.
</div>

או ע”י הוספת CSS Classes:

<div id="car" class="mazda">
  Guy is very happy with his Mazda 3.
</div>

הפיתרונות האלה עובדים, הם בעייתיים משתי סיבות:

1. ה- HTML אינו תקין מבחינת, ולא עובר ואלידציה של W3C.
2. CSS Classes נועדו להוספת סגנונות עיצוב ולא לשמירת מידע נוסף על אלמנטים.

איך עושים את זה ב- HTML5: הכירות עם מאפייני ה- *-data

HTML5 מאפשר לנו להוסיף מידע חופשי לכל אלמנט ע”י שימוש בקידומת –data. הצורה המדוייקת היא  *-data כאשר * היא המאפיין אותו אנחנו רוצים להוסיף לאלמנט.

לדוגמא:

<div id="car" data-brand="mazda" data-model="3">
  Guy is very happy with his Mazda 3.
</div>

הקוד הזה הוא קוד תקין מבחינת תקן ה- HTML5 ויעבור ואלידציה.

איך ניגשים למאפיינים בקוד JavaScript?

עד היום, היינו ניגשים בקוד JavaScript למאפיינים של אלמנטים באופן הבא:

<script>
  // Get the cal element
  var mycar = document.getElementById('car');
 
  // Get the "data-brand" attribute value (returns "mazda")
  var brand = mycar.getAttribute("data-brand");
 
  // Change "data-brand" to "toyota"
  mycar.setAttribute("data-brand", "toyota");
 
  // Removes "data-brand" attribute entirely
  mycar.removeAttribute("data-brand");
</script>

בעוד הגישה הזאת עובדת, לא אליה התכוון המשורר. ב- HTML5 יש לאלמנטים מאפיין חדש בשם dataset מסוג DOMStringMap, שמכיל את רשימת כל מאפייני ה- data. נשתמש בו ונהנה מסינטקס יפה יותר:

<script>
  // Get the cal element
  var mycar = document.getElementById('car');
 
  // Get the "data-brand" attribute value (returns "mazda")
  var brand = mycar.dataset.brand;
 
  // Change "data-brand" to "toyota"
  mycar.dataset.brand = 'toyota';
 
  // Removes "data-brand" attribute entirely
  mycar.dataset.brand = null;
</script>

תמיכה בדפדפנים

כמו במגוון אלמנטים של HTML5, גם מאפייני ה- data אינם ממומשים בכל הגירסאות של הדפדפנים, ובוודאי לא בגירסאות ישנות שלא תומכות ב- HTML5 כלל. לכן, הדרך המומלצת כיום לשמור מידע חופשי על אלמנטים הוא להשתמש בפונקציית ה- ()data של jQuery שמטפלת בנושא ההבדלים בין הדפדפנים השונים.

<script>
  // Get the cal element
  var mycar = $('#car');
 
  // Get the "data-brand" attribute value (returns "mazda")
  var brand = mycar.data("brand");
 
  // Change "data-brand" to "toyota"
  mycar.data("brand", "toyota");
 
  // Removes "data-brand" attribute entirely
  mycar.data("brand", null);
</script>

תהנו!