HTML5: הוספת מידע חופשי לאלנטים עם data- attributes ו- datasets

30 ביולי 2011

tags: , , ,
one comment

HTML5 data attributes custom data dataset

מאפייני ה- *-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
>

תהנו!

Add comment
facebook linkedin twitter email

one comment

  1. בר17 בינואר 2012 ב 22:11

    טוב לדעת… אני משתמש ב data המון ולא חשבתי שזה קרוב להיות תקני…

Comments are closed.