Атрибут data-*

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

Оглавление:
  1. Атрибуты данных HTML5
  2. getAttribute и setAttribute
  3. jQuery data()
  4. JavaScript API для data-*

Поэтому, большинство веб-разработчиков полагаются на класс или атрибуты rel, поскольку они определены в HTML. Для примера, предлагаю создать виджет сообщений из Twitter. По идее, JavaScript должен быть настраиваемым без изменения кода, поэтому мы добавим идентификатор пользователя в класс:

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

Для того чтобы определить класс user_bob этому элементу, добавим идентификатор msglist, этот id через JavaScript покажет все сообщения от этого пользователя.

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

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

Теперь атрибуты для класса стали большими.

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

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

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

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

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

getAttribute и setAttribute

С помощью методов JavaScript getAttribute и setAttribute, любой браузер позволит вам получать и модифицировать атрибут data-, например:

var msglist = document.getElementById("msglist");

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

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

к меню ↑

jQuery data()

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

var msglist = $("#msglist");

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

Но, будьте осторожны, jQuery пытается преобразовать данные к нужному типу (bool переменные, число объектов, массивы или null) и относится к DOM. В отличие от setAttribute, метод data() не будет физически менять атрибут data-list-size, если Вы проверите его значение за пределами jQuery, значение останется 5.

к меню ↑

JavaScript API для data-*

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

HTML5 API для набора данных
Название атрибута Название набора данных API
data-user user
data-maxage maxage
data-list-size listSize

Новый код будет выглядеть так:

var msglist = document.getElementById("msglist");

  var show = msglist.dataset.listSize;
  msglist.dataset.listSize = +show+3;

В CSS атрибуты дата можно определить селекторами:

[data-value] {
/* для всех атрибутов */
}

[data-value="foo"] {
/* только для указанного атрибута */
}

[data-value*="foo"] {
/* для всех указанных атрибутов */
}

[data-value~="foo"] {
/* для списка указанных атрибутов */
}

[data-value^="foo"] {
/* для атрибутов начинающихся с foo */
}

[data-value=|"foo"] {
/* для атрибутов содержащих разделитель */
}

[data-value$="foo"] {
/* для атрибутов заканчивающихся на foo */
}

Квадратные скобки нужны чтобы быть уверенным, что селектор будет работать в CSS.