Как использовать атрибуты данных HTML5

В прежние времена XHTML / HTML4 у разработчиков было мало вариантов хранения произвольных данных, связанных с DOM. Вы могли изобретать свои собственные атрибуты, но это было рискованно; Ваш код будет недействительным, браузеры могут игнорировать данные, и это вызовет проблемы, если имя станет стандартным атрибутом HTML.

Поэтому большинство разработчиков полагалось на атрибуты class или rel поскольку они были единственными, которые допускали достаточно гибкие строки. Например, предположим, что мы создавали виджет для отображения сообщений, таких как временные шкалы Twitter. В идеале JavaScript должен быть конфигурируемым без изменения его кода — поэтому мы определяем идентификатор пользователя в атрибуте class , например

 <div id="msglist" class="user_bob"></div> 

Наш код JavaScript будет искать элемент с идентификатором msglist . Небольшой анализ строки найдет класс, начинающийся с user_ , предположим, что «bob» — это идентификатор, и отобразит все сообщения от этого пользователя.

Допустим, мы хотели определить максимальное количество сообщений и игнорировать сообщения старше шести месяцев (180 дней):

 <div id="msglist" class="user_bob list-size_5 maxage_180"></div> 

Наш class атрибут становится все более громоздким; легко делать ошибки, а разбор JavaScript — более сложный.

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

К счастью, HTML5 вводит пользовательские атрибуты данных. Вы можете использовать любое строчное имя с префиксом data- , например

 <div id="msglist" data-user="bob" data-list-size="5" data-maxage="180"></div> 

Пользовательские атрибуты данных:

• являются строками — вы можете хранить все, что может быть закодировано, например, JSON. Преобразование типов должно выполняться в JavaScript.
• следует использовать только тогда, когда нет подходящего элемента или атрибута HTML5.
• являются частными для страницы. В отличие от микроформатов, они должны игнорироваться внешними системами, такими как поисковые роботы.

Разбор JavaScript # 1: getAttribute и setAttribute

Каждый браузер позволяет вам получать и изменять атрибуты data- с помощью методов getAttribute и setAttribute , например:

 var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3); 

Это работает, но должно использоваться только как запасной вариант для старых браузеров.

Разбор JavaScript # 2: метод данных jQuery ()

Начиная с версии 1.4.3, метод data() jQuery анализировал атрибуты данных HTML5. Вам не нужно указывать префикс data- чтобы можно было написать эквивалентный код:

 var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3); 

Однако, будьте осторожны, что jQuery ловко пытается преобразовать данные в подходящий тип (логические, числа, объекты, массивы или нуль) и избегает прикосновения к DOM. В отличие от setAttribute , метод data() не будет физически изменять атрибут data-list-size — если вы проверите его значение вне jQuery, он все равно будет равен «5».

Синтаксический анализ JavaScript # 3: API набора данных

Наконец, у нас есть API набора данных HTML5, который возвращает объект DOMStringMap. Следует отметить, что имена атрибутов данных отображаются путем удаления префикса data- , удаления дефисов и преобразования в camelCase, например

Наш новый код:

 var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3; 

API datalist поддерживается всеми современными браузерами, но не IE10 и ниже. Доступна прокладка, но, возможно, более практично использовать jQuery, если вы пишете для старых браузеров.