Як використовувати data-атрибути HTML5

Давним-давно, за часів XHTML/HTML4 у розробників було лише кілька можливостей, якими могли користуватися у тому, щоб зберігати довільні дані, які стосуються DOM. Ви могли винаходити власні атрибути, але це було ризиковано - ваш код не був би валідним, браузери могли ігнорувати ваші дані, і це могло викликати проблеми, якщо назва збігалася зі стандартними атрибутами HTML.

Скажімо, ми хотіли б також задати максимальну кількість повідомлень, і пропускати повідомлення старше шести місяців (180 днів):

Data-атрибути HTML5

На щастя, в HTML5 була введена можливість використовувати атрибути користувача. Ви можете використовувати будь-яке ім'я в нижньому регістрі з префіксомdata-, наприклад:

Всі браузери дозволяють вам отримати та змінити data-атрибути з використанням методів getAttribute та setAttribute:

Це працює, але має використовуватися лише для сумісності зі старими браузерами.

Починаючи з версії jQuery 1.4.3, метод data() обробляє data-атрибути HTML5. Вам не потрібно явно вказувати префіксdata-, так що подібний код буде працювати:

Але як би там не було, майте на увазі, що jQuery намагається конвертувати значення таких атрибутів у підхідні типи (булеві значення, числа, об'єкти, масиви або null) і торкнеться DOM. На відміну відsetAttribute, методdata() фізично не замінить атрибутdata-list-size - якщо ви перевірите його значення поза jQuery - воно все ще залишиться рівним 5.

І, нарешті, ми маємо API для роботи з наборами даних HTML5, яке повертає об'єкт DOMStringMap. Необхідно пам'ятати, що data-атрибути відображаються в об'єкт без префіксівdata-, з назв забираються знаки дефісу, а самі назви конвертуютьсяв camelCase, наприклад:

---