Дэвид Флэнаган - JavaScript. Подробное руководство, 6-е издание

Кроме того, стандарт 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), подобных диаграмме в примере выше, с использованием элемента

Существует несколько способов работы с атрибутами элементов. Тип Node определяет свойство attributes . Это свойство имеет значение null для всех узлов, не являющихся объектами Element . Свойство attributes объектов Element является объектом, подобным массиву, доступным только для чтения, представляющим все атрибуты элемента. Подобно спискам NodeList , объект attributes не является статической копией. Он может индексироваться числами, что означает возможность перечисления всех атрибутов элемента, а также именами атрибутов:

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

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

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

Значениями, получаемыми в результате индексирования объекта attributes , являются объекты Attr . Объекты Attr - это специализированный подтип Node , но в действительности никогда не используемые в таком качестве. Свойства name и value объектов Attr возвращают имя и значение атрибута.

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

• Содержимым является строка разметки HTML «This is a simple document».

• Содержимым является простая текстовая строка «This is a simple document».

• Содержимым является узел типа Text , узел типа Element , включающий дочерний узел Text , и еще один узел типа Text .

Все три ответа являются верными, и каждый ответ ценен по-своему. В следующих разделах описывается, как работать с представлением в виде разметки HTML, с представлением в виде простого текста и с представлением в виде дерева объектов.

При чтении свойства innerHTML объекта Element возвращается содержимое этого элемента в виде строки разметки. Попытка изменить значение этого свойства приводит к вызову синтаксического анализатора веб-броузера и замещению текущего содержимого элемента разобранным представлением новой строки. (Несмотря на свое название, свойство innerHTML может использоваться для работы не только с HTML-, но и с XML-элементами.)

Веб-броузеры прекрасно справляются с синтаксическим анализом разметки HTML, поэтому операция изменения значения свойства innerHTML обычно достаточно эффективна, несмотря на необходимость синтаксического анализа. Тем не менее обратите внимание, что многократное добавление фрагментов текста в свойство innerHTML с помощью оператора += обычно далеко не эффективное решение, потому что требует выполнения двух шагов - сериализации и синтаксического анализа.

Впервые свойство innerHTML было реализовано в IE4. Несмотря на то что оно достаточно давно поддерживается всеми броузерами, это свойство было стандартизовано только с появлением стандарта HTML5. Спецификация HTML5 требует, чтобы свойство innerHTML было реализовано не только в объекте Element , но и в объекте Document , однако пока этому требованию отвечают не все броузеры.

Кроме того, спецификация HTML5 стандартизует свойство с именем outerHTML . При обращении к свойству outerHTML оно возвращает строку разметки HTML или XML, содержащую открывающий и закрывающий теги элемента, которому принадлежит это свойство. При записи нового значения в свойство outerHTML элемента новое содержимое замещает элемент целиком. Свойство outerHTML определено только для узлов типа Element , оно отсутствует в объекте Document . К моменту написания этих строк свойство outerHTML поддерживалось всеми текущими броузерами, кроме Firefox. (В примере 15.5, далее в этой главе, приводится реализация свойства outerHTML на основе свойства innerHTML .)