Первый из них проверяет присутствие атрибута с указанным именем, а второй удаляет атрибут. Эти методы особенно удобны при работе с логическими атрибутами: для этих атрибутов (таких как атрибут
disabled
HTML-форм) важно их наличие или отсутствие в элементе, а не их значения.
Если вам приходится работать с XML-документами, содержащими атрибуты из других пространств имен, вы можете использовать варианты этих четырех методов, позволяющие указывать имя пространства имен:
getAttributeNS, setAttributeNS, hasAttributeNS
и
removeAttributeNS.
Вместо единственного
строкового аргумента с именем атрибута эти методы принимают два аргумента. В первом передается URI-идентификатор, определяющий пространство имен. Во втором аргументе обычно передается неквалифицированное локальное имя атрибута из этого пространства имен. Исключением является метод
setAttributeNS,
которому во втором атрибуте необходимо передавать квалифицированное имя атрибута, включающее идентификатор пространства имен. Более полная информация об этих методах доступа к атрибутам из других пространств имен приводится в четвертой части книги.
15.4.3. Атрибуты с данными
Иногда бывает желательно добавить в HTML-элементы дополнительные данные, обычно когда предусматривается возможность выбора этих элементов в Java-Script-сценариях и выполнения некоторых операций с ними. Иногда это можно реализовать, добавив специальные идентификаторы в атрибут
class
. Иногда, когда речь заходит о более сложных данных, программисты прибегают к использованию нестандартных атрибутов. Как отмечалось выше, для чтения и изменения значений нестандартных атрибутов можно использовать методы
getAttribute
и
setAttribute.
Платой за это будет несоответствие документа стандарту.
Стандарт 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>