HTML5 data-атрибуты (data-*)

Тем, кто занимался разработкой сложных web-приложений часто приходилось сталкиваться с ситуацией, когда необходимо хранить какие-либо данные прямо в html — документе. Будь то дефолтные значения для чего-либо или свойства элементов. Зачастую они добавляли сложные классы, которые надо было парсить, жертвуя семантикой верстки или же пользовались атрибутом rel, что сказывалось на валидности документа. Или вообще добавляли свои собственные атрибуты…

В HTML5 появилась возможность добавления универсального атрибута data-* для любых элементов DOM дерева.

Синтаксис

Согласно спецификации W3C атрибут data-*, как и любой другой атрибут должен именоваться в нижнем регистре. Причем само имя состоит из 2-х частей — префикса ‘data-‘ и собственно имени, например — ‘error-count’ (смысловые части имени должны быть разделены ‘-‘).  Значением этого атрибута может быть любая строка.

Пример

[codesyntax lang=»html4strict» title=»HTML»]

<ul id="errors" data-error-count="3">
	<li>error 1</li>
	<li>error 2</li>
	<li>error 3</li>
</ul>

[/codesyntax]

Как этим пользоваться

Для работы c данными из атрибута data-* можно использовать свойство элемента dataset. Свойство dataset — это часть нового HTML5 JavaScript APIs. Его должны понимать все браузеры, поддерживающие HTML5. Оно возвращает объект DOMStringMap. Причем обращаться к атрибуту следует в стиле camelCase, убрав все дефисы. Например:

[codesyntax lang=»html4strict» title=»HTML»]

<script type="text/javascript">
	var error = document.getElementById('errors');
	//Получаем количество ошибок
	var count = error.dataset.errorCount;
	//Меняем количество ошибок
	error.dataset.errorCount = 1;
	//Удаляем атрибут data-error-count
	error.dataset.errorCount= null;
</script>
<ul id="errors" data-error-count="3">
	<li>error 1</li>
	<li>error 2</li>
	<li>error 3</li>
</ul>

[/codesyntax]

Но на самом деле некоторые браузеры до сих пор не поддерживают свойство dataset. В этом случае можно воспользоваться другими методами.

1. Использование методов getAttribute и setAttribute

[codesyntax lang=»javascript» title=»JavaScript»]

var error = document.getElementById('errors');
//Получаем количество ошибок
var count = error.getAttribute('data-error-count');
//Меняем количество ошибок
error.setAttribute('data-error-count',1);

[/codesyntax]

2. Использование метода querySelectorAll

[codesyntax lang=»javascript» title=»JavaScript»]

// Выбираем все элементы с атрибутом data-error-count
document.querySelectorAll('[data-error-count]');

// Выбираем все элементы c 3-мя ошибками
document.querySelectorAll('[data-error-count=3]');

[/codesyntax]

3. Использование JQuery

C выходом JQuery 1.5 появилась возможность манипулировать данными из атрибута data-*:

[codesyntax lang=»javascript» title=»JavaScript»]

var er = $('#error').data('error-count'); // => 3
// или так
var d = $('#error').data(); // => { "error-count": 3 }
er = d['error-count']; // => 3

[/codesyntax]

В JQuery 1.6 работа метода data() стала значительно быстрее, а доступ к значениям в этих атрибутах соответствует спецификации W3C HTML5 spec, т.е. ключи надо передавать в camelCase формате:

[codesyntax lang=»javascript» title=»JavaScript»]

var er = $('#error').data('errorCount'); // => 3
// или так
var d = $('#error').data(); // => { "errorCount": 3}
er = d.errorCount; // => 3
// Меняем количество ошибок
$('#error').data('errorCount',1)

[/codesyntax]

Совет

Чтобы в будущем не возникало конфликтов с какими-либо плагинами, использующими этот атрибут, лучше для каждого проекта использовать свое «пространство имен». Например, data-bpanel-version или data-rds-user.

Запись опубликована в рубрике HTML/CSS, JavaScript/JQuery с метками , , . Добавьте в закладки постоянную ссылку.

4 комментария: HTML5 data-атрибуты (data-*)

  1. Павел says:

    А как обстоит дело со старыми браузами — так понял через get(set)Attribute() должно и в осликах запускаться?

  2. Лично не тестировал, но думаю, что со старыми осликами могут быть проблемы.

  3. А если я сохраню в data-атрибуте ссылку на картинку, картинка будет загружаться, или начнет грузиться только после того, как я ее каким-либо образом выведу на экран?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *