Стандарт HTML5 предоставляет решение этой проблемы. В документах, соответствующих стандарту HTML5, все атрибуты, имена которых состоят только из символов в нижнем регистре и начинаются с приставки «data-», считаются допустимыми. Эти «атрибуты с данными» не оказывают влияния на представление элементов, в которых присутствуют, и обеспечивают стандартный способ включения дополнительных данных без нарушения стандартов.
Кроме того, стандарт HTML5 определяет в объекте
Element
свойство
dataset
. Это свойство ссылается на объект, который имеет свойства, имена которых соответствуют именам атрибутов data- без приставки. То есть свойство
dataset.х
будет хранить значение атрибута
data-x
. Имена атрибутов с дефисами отображаются в имена свойств с переменным регистром символов: атрибут
data-jquery-test
превратится в свойство
dataset.jqueryTest
.
Ниже приводится более конкретный пример. Допустим, что в документе имеется следующий фрагмент разметки:
– это маленькое изображение, обычно некоторый график, предназначенное для отображения в потоке текста. Чтобы сгенерировать такое изображение, необходимо извлечь значение атрибута с данными, как показано ниже:
// Предполагается, что в броузере поддерживается метод 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>
.
15.4.4. Атрибуты как узлы типа Attr
Существует несколько способов работы с атрибутами элементов. Тип
Node
определяет свойство
attributes
. Это свойство имеет значение null для всех узлов, не являющихся объектами
Element
. Свойство
attributes
объектов
Element
является объектом, подобным массиву, доступным только для чтения, представляющим все атрибуты элемента. Подобно спискам
NodeList
, объект
attributes
не является статической копией. Он может индексироваться числами, что означает возможность перечисления всех атрибутов элемента, а также именами атрибутов:
document.body.attributes[0] // Первый атрибут элемента <body>
Значениями, получаемыми в результате индексирования объекта
attributes
, являются объекты
Attr
. Объекты
Attr
– это специализированный подтип
Node
, но в действительности никогда не используемые в таком качестве. Свойства
name
и
value
объектов
Attr
возвращают имя и значение атрибута.
15.5. Содержимое элемента
Взгляните еще раз на рис. 15.1 и попробуйте ответить на вопрос: какой объект представляет «содержимое» элемента
<р>.
На этот вопрос можно дать три ответа:
• Содержимым является строка разметки HTML «This is a <i>simple</i> document».
• Содержимым является простая текстовая строка «This is a simple document».
• Содержимым является узел типа
Text
, узел типа
Element
, включающий дочерний узел
Text
, и еще один узел типа
Text
.
Все три ответа являются верными, и каждый ответ ценен по-своему. В следующих разделах описывается, как работать с представлением в виде разметки HTML, с представлением в виде простого текста и с представлением в виде дерева объектов.
15.5.1. Содержимое элемента в виде HTML
При чтении свойства
innerHTML
объекта
Element
возвращается содержимое этого элемента в виде строки разметки. Попытка изменить значение этого свойства приводит к вызову синтаксического анализатора веб-броузера и замещению текущего содержимого элемента разобранным представлением новой строки. (Несмотря на свое название, свойство
innerHTML
может использоваться для работы не только с HTML-, но и с XML-элементами.)