92 • Глава 2
стым для написания, но также провоцирует техническую невалидность страниц. Так как
для передачи пар «имя/значение» скриптам гораздо проще использовать
data-shields=5
,
HTML5 вводит и стандартизует эту полезную, приближенную к реальности практику
и предоставляет нам простой и стандартизированный API для доступа и манипулирования
этими пользовательскими атрибутами.
Когда атрибуты
data-*
будут полностью поддерживаться браузерами, JavaScript сможет
получать доступ к свойствам при помощи
element.dataset.foo
(где атрибут
data-foo
содержит значение).
В
настоящее время такое поведение поддерживается во всех браузерах, за исключением
Internet Explorer, но и в этом случае вам может помочь плагин со страницы
http://gist github
com/362081
.
В
ином случае скрипты могут получать доступ к значениям при помощи методов
get/
setAttribute
. Преимущество свойства
dataset
по отношению к
setAttribute
состоит
в том, что ему намного проще приписать числовые значения. Например, вам необходимо
извлечь все значения, хранящиеся в атрибутах
data-*
. Код, написанный с
использовани-
ем встроенной функциональности, получается простым и понятным (данный пример не
оптимизирован):
var values = [];
for (var key in element.dataset) {
values.push(element.dataset[key]);
}
Однако современный вариант кода, хотя и дает такой же результат, не так понятен и до-
ступен неопытным разработчикам и людям, плохо знакомым с
JavaScript и DOM:
var attributes = el.attributes,
values = [];
for (var i = 0; i < attributes.length; i++) {
if (attributes[i].name.indexOf('data-') === 0) {
values.push(test.attributes[i].nodeValue);
}
}
Достарыңызбен бөлісу: 
