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

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

Кроме того, стандарт HTML5 определяет в объекте

Element

свойство

dataset

. Это свойство ссылается на объект, который имеет свойства, имена которых соответствуют именам атрибутов data- без приставки. То есть свойство

dataset.х

будет хранить значение атрибута

data-x

. Имена атрибутов с дефисами отображаются в имена свойств с переменным регистром символов: атрибут

data-jquery-test

превратится в свойство

dataset.jqueryTest

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

1 1 1 2 2 3 4 5 5 4 3 5 6 7 7 4 2 1

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>

15.4.4. Атрибуты как узлы типа Attr

Существует несколько способов работы с атрибутами элементов. Тип

Node

определяет свойство

attributes

. Это свойство имеет значение null для всех узлов, не являющихся объектами

Element

. Свойство

attributes

объектов

Element

является объектом, подобным массиву, доступным только для чтения, представляющим все атрибуты элемента. Подобно спискам

NodeList

, объект

attributes

не является статической копией. Он может индексироваться числами, что означает возможность перечисления всех атрибутов элемента, а также именами атрибутов:

document.body.attributes[0] // Первый атрибут элемента <body>

document.body.attributes.bgcolor // Атрибут bgcolor элемента <body> 

document.body.attributes["ONLOAD"] // Атрибут onload элемента <body>

Значениями, получаемыми в результате индексирования объекта

attributes

, являются объекты

Attr

. Объекты

Attr

- это специализированный подтип

Node

, но в действительности никогда не используемые в таком качестве. Свойства

name

value

объектов

Attr

возвращают имя и значение атрибута.

15.5. Содержимое элемента

Взгляните еще раз на рис. 15.1 и попробуйте ответить на вопрос: какой объект представляет «содержимое» элемента

<р>.

На этот вопрос можно дать три ответа: