Книга: JavaScript. Подробное руководство, 6-е издание

15.4.3. Атрибуты с данными

15.4.3. Атрибуты с данными

Иногда бывает желательно добавить в HTML-элементы дополнительные данные, обычно когда предусматривается возможность выбора этих элементов в Java-Script-сценариях и выполнения некоторых операций с ними. Иногда это можно реализовать, добавив специальные идентификаторы в атрибут class. Иногда, когда речь заходит о более сложных данных, программисты прибегают к использованию нестандартных атрибутов. Как отмечалось выше, для чтения и изменения значений нестандартных атрибутов можно использовать методы getAttribute() и setAttribute(). Платой за это будет несоответствие документа стандарту.

Стандарт HTML5 предоставляет решение этой проблемы. В документах, соответствующих стандарту HTML5, все атрибуты, имена которых состоят только из символов в нижнем регистре и начинаются с приставки «data-», считаются допустимыми. Эти «атрибуты с данными» не оказывают влияния на представление элементов, в которых присутствуют, и обеспечивают стандартный способ включения дополнительных данных без нарушения стандартов.

Кроме того, стандарт HTML5 определяет в объекте Element свойство dataset. Это свойство ссылается на объект, который имеет свойства, имена которых соответствуют именам атрибутов data- без приставки. То есть свойство dataset.х будет хранить значение атрибута data-x. Имена атрибутов с дефисами отображаются в имена свойств с переменным регистром символов: атрибут data-jquery-test превратится в свойство dataset.jqueryTest.

Ниже приводится более конкретный пример. Допустим, что в документе имеется следующий фрагмент разметки:

<span data-ymin="0" data-ymax="10">
1 1 1 2 2 3 4 5 5 4 3 5 6 7 7 4 2 1
</span>
Sparkline - это маленькое изображение, обычно некоторый график, предназначенное для отображения в потоке текста. Чтобы сгенерировать такое изображение, необходимо извлечь значение атрибута с данными, как показано ниже:

// Предполагается, что в броузере поддерживается метод Array.map(),
// определяемый стандартом ES5 (или реализована его имитация)
var sparklines = document.getElementsByClassName("sparkline");
for(var і = 0; і < sparklines.length; i++) {
  var dataset = sparklines[і].dataset;
  var ymin = parseFloat(dataset.ymin);
  var ymax = parseFloat(dataset.ymax);
  var data = sparklines[i].textContent.split(" ").map(parseFloat);
  drawSparkline(sparklines[i], ymin, ymax, data); // Еще не реализована
}

На момент написания этих строк свойство dataset еще не было реализовано в текущих броузерах, поэтому представленное выше решение можно было бы реализовать так:

var sparklines = document.getElementsByClassName("sparkline");
for(var і = 0; і < sparklines.length; i++) {
  var elt = sparklines[i];
  var ymin = parseFloat(elt.getAttribute("data-ymin"));
  var ymin = parseFloat(elt.getAttribute("data-ymax"));
  var points = elt.getAttribute("data-points");
  var data = elt.textContent.split(" ').map(parseFloat); 
  drawSparkline(elt, ymin, ymax, data); // Еще не реализована
}

Обратите внимание, что свойство dataset является (или будет, когда будет реализовано) «живым», двунаправленным интерфейсом к атрибутам data- элемента. Изменение или удаление свойства объекта dataset приводит к изменению или удалению соответствующего атрибута data- элемента.

Функция drawSparkline() в примере выше является вымышленной, однако в примере 21.13 демонстрируется прием рисования внутристрочных диаграмм (sparklines), подобных диаграмме в примере выше, с использованием элемента <canvas>.

Оглавление книги