Как да използвам атрибутите на данните HTML5

По времето на XHTML/HTML4 имаше само няколко функции, които разработчиците могат да използват за съхраняване на произволни DOM-свързани данни. Можете да измислите свои собствени атрибути, но това е рисковано - вашият код няма да е валиден, браузърите могат да игнорират вашите данни и това може да създаде проблеми, ако името съвпада със стандартните HTML атрибути.

Да предположим, че също така бихме искали да зададем максималния брой съобщения и да пропуснем съобщения по-стари от шест месеца (180 дни):

Атрибути на HTML5 данни

За щастие HTML5 въведе възможността за използване на персонализирани атрибути. Можете да използвате всяко малко име с префикс данни-, например:

Всички браузъри ви позволяват да получавате и променяте атрибути на данни с помощта на методите getAttribute и setAttribute:

Това работи, но трябва да се използва само за поддържане на съвместимост с по-стари браузъри.

От jQuery 1.4.3 методът data () обработва атрибутите на данните HTML5. Не е необходимо да посочвате изрично префикса данни-, така че код като този ще работи:

Независимо от това, имайте предвид, че jQuery се опитва да преобразува стойностите на тези атрибути в подходящи типове (булеви числа, числа, обекти, масиви или нула) и ще повлияе на DOM. За разлика от setAttribute, метод данни () няма да замени физически атрибута размер на списъка с данни - ако проверите стойността му извън jQuery - тя все още остава на 5.

И накрая, имаме API за работа с набори от данни HTML5, който връща обект DOMStringMap. Трябва да се помни, че атрибутите на данни се преобразуват в обект без префикси. данни-, тиретата се премахват от имената, а самите имена се преобразуват в camelCase, например: