Дока data-атрибуты

html/data-attributes/index.md

@@ -0,0 +1,134 @@
+---
+title: "data-атрибуты"
+description: "Пользовательские атрибуты, которые позволяют хранить полезную информацию в HTML-элементах, стилизовать их при помощи CSS, а также обращаться к ним из JavaScript."
+authors:
+  - kranatoly
+related:
+  - js/element-dataset
+  - js/dom
+  - html/data
+tags:
+  - doka
+---
+
+## Как понять
+
+Бывают случаи, когда существующих в HTML атрибутов может быть недостаточно. Нестандартные атрибуты могут пригодиться для передачи пользовательских данных из HTML в JavaScript, или чтобы _помечать_ HTML-элементы для JavaScript.
+
+Если создать случайный выдуманный атрибут, то могут возникнуть проблемы — в новых версиях языка HTML такие атрибуты могут появиться в стандарте и выполнять какую-либо функцию. Тем более не рекомендуется применять существующие атрибуты способами, на которые они не рассчитаны. Скорее всего, кроме подчеркивания линтером негативных последствий может и не быть, но и это считается плохой практикой.
+
+Однако, выход есть — в HTML5 появились data-атрибуты. Они всегда начинаются с префикса `data-` (что в переводе означает «данные»). Также их называют атрибутами `data-*`.
+
+## Как пишется
+
+Атрибут должен начинаться с «data», а после тире можно написать любое подходящее по смыслу имя атрибута.
+
+Используем атрибут `data-size` со значением `small`:
+
+```html
+<div class="attribute-div" title="attribute" data-size="small"></div>
+```
+
+Можно создавать атрибуты без значения:
+
+```html
+<div data-small></div>
+```
+
+Имя может быть длинным, из нескольких слов. Слова разделяются тире:
+
+```html
+<div data-long-size-atribute="small"></div>
+```
+
+## Стилизация HTML-элементов в CSS
+
+data-атрибуты можно использовать в качестве [селекторов по атрибуту](/css/attribute-selector/).
+
+Можно выбрать элементы, у которых есть нужный нам атрибут:
+
+```css
+[data-length] {}
+```
+
+Элементы, у которых атрибут имеет заданное значение:
+
+```css
+[data-age="46"] {}
+```
+
+Элементы со значениями атрибута, которые содержат, например, 6, и те, куда входит это значение (6.88 или 600):
+
+```css
+[data-id^="6"] {}
+```
+
+Элементы, где заданная строка содержится где-то в значении свойства:
+
+```css
+[data-format*="string"] {}
+```
+
+Если при выборе селектора указать ключ `i`, можно получить элементы с атрибутами, значения которых не чувствительны к регистру:
+
+```css
+[data-size="medium" i] {}
+```
+
+Он выберет все следующие элементы:
+
+```html
+<div data-size="medium"></div>
+<div data-size="MEDIUM"></div>
+<div data-size="Medium"></div>
+```
+
+С помощью CSS можно извлечь значение data-атрибута и вывести его на страницу:
+
+```html
+<div data-symbol="〷◠‿◠〷"></div>
+```
+
+```css
+[data-symbol]::before {
+  content: attr(data-symbol) /* Вернёт „〷◠‿◠〷"*/
+}
+```
+
+## Работа с data-атрибутами в JavaScript
+
+У data-атрибутов есть свой собственный API. Читать и записывать значения data-атрибутов элемента можно с помощью свойства `dataset`. С его помощью можно также и добавлять новые data-атрибуты к элементу.
+
+Более подробно можно прочитать в статье про [`.dataset`](/js/element-dataset/).
+
+Можно обращаться к значениям атрибутов `data-*` также, как и к значениям других атрибутов: при помощи методов [`getAttribute`](/js/element-getattribute/) и `setAttribute` для чтения и записи данных соответственно.
+
+Прочитать значение атрибута:
+
+```js
+let attrValue = element.getAttribute('data-episode')
+```
+
+Записать новое значение 4 для атрибута `data-episode`:
+
+```js
+element.setAttribute('data-episode', '4')
+```
+
+## Делать не рекомендуется
+
+Атрибут просто с именем `data` не относится к data-атрибутам, это обычный кастомный атрибут, который использовать не рекомендуется.
+
+```html
+<div data="noDataAtribute"></div>
+```
+
+Также, не стоит хранить в data-атрибутах данные, которые должны быть видимы и доступны для [вспомогательных технологий](/a11y/#vspomogatelnye-tehnologii) (assistive technology). К тому же, эти данные не индексируются поисковыми роботами.
+
+## Ограничения и краткий вывод
+
+Internet Explorer 11+ поддерживает оба стандарта работы с data-атрибутами, IE 10 и ниже может работать с ними только через `getAttribute` / `setAttribute`.
+
+Производительность чтения data-атрибутов по сравнению с хранением этих данных в хранилищах данных JavaScript намного хуже, использование `dataset` еще медленнее, чем чтение данных с помощью `getAttribute`.
+
+Для пользовательских метаданных, которые связаны с элементами, data-атрибуты это отличное решение. На практике часто можно увидеть применение data-атрибутов в автоматизированном тестировании. Стандартным для многих тестовых фреймворков является атрибут `data-testid`.