Можностей, предоставляемых веб-разработчикам

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);
    }
}

жүктеу/скачать 5,47 Mb.

Достарыңызбен бөлісу: