אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » HTML 5 » data attribute

data attribute

רן בר-זיק דצמבר 29, 2013 8:08 am אין תגובות

תכונת HTML5 חשובה ושימושית של כל אלמנט שאפשר לחהשתמש בה כבר היום לאחסון מידע על כל אלמנט שהוא בדף שלנו.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

תכונת 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.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
»HTML5 Progress bar
»Web Sockets
HTML 5

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד