Атрибуты data-*

Дата-атрибут — это пользовательский атрибут на HTML-элементе, название которого начинается с data-. Это встроенная возможность стандарта HTML5. В дата-атрибутах можно хранить дополнительную информацию в стандартных HTML-элементах и работать с этой информацией в JavaScript при помощи собственного API.

Бывают случаи, когда существующих в HTML атрибутов может быть недостаточно. Нестандартные атрибуты могут пригодиться для передачи пользовательских данных из HTML в JavaScript, или чтобы помечать HTML-элементы для JavaScript.

Если создать случайный выдуманный атрибут, то могут возникнуть проблемы — в новых версиях языка HTML такие атрибуты могут появиться в стандарте и выполнять какую-либо функцию. Тем более не рекомендуется применять существующие атрибуты способами, на которые они не рассчитаны. Скорее всего, кроме подчёркивания линтером негативных последствий может и не быть, но и это считается плохой практикой.

Однако, выход есть — в HTML5 появились дата-атрибуты. Они всегда начинаются с префикса data-. Также их называют атрибутами data-*.

Атрибут должен начинаться с «data» (что в переводе означает «данные»), а после тире можно написать любое подходящее по смыслу слово.

Используем атрибут data-size со значением small:

        
          
          <div class="attribute-div" title="attribute" data-size="small"></div>
          <div class="attribute-div" title="attribute" data-size="small"></div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно создавать атрибуты без значения:

        
          
          <div data-small></div>
          <div data-small></div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Имя может быть длинным, из нескольких слов. Слова разделяются тире:

        
          
          <div data-long-size-atribute="small"></div>
          <div data-long-size-atribute="small"></div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Дата-атрибуты можно использовать в качестве селекторов по атрибуту.

Можно выбрать элементы, у которых есть нужный нам атрибут:

        
          
          [data-length] {}
          [data-length] {}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Элементы, у которых атрибут имеет заданное значение:

        
          
          [data-age="46"] {}
          [data-age="46"] {}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Элементы со значениями атрибута, которые содержат, например, 6, и те, куда входит это значение (6.88 или 600):

        
          
          [data-id^="6"] {}
          [data-id^="6"] {}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Элементы, где заданная строка содержится где-то в значении свойства:

        
          
          [data-format*="string"] {}
          [data-format*="string"] {}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если при выборе селектора указать ключ i, можно получить элементы с атрибутами, значения которых не чувствительны к регистру:

        
          
          [data-size="medium" i] {}
          [data-size="medium" i] {}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Он выберет все следующие элементы:

        
          
          <div data-size="medium"></div><div data-size="MEDIUM"></div><div data-size="Medium"></div>
          <div data-size="medium"></div>
<div data-size="MEDIUM"></div>
<div data-size="Medium"></div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

С помощью CSS можно извлечь значение дата-атрибута и вывести его на страницу:

        
          
          <div data-symbol="〷◠‿◠〷"></div>
          <div data-symbol="〷◠‿◠〷"></div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          [data-symbol]::before {  content: attr(data-symbol)}
          [data-symbol]::before {
  content: attr(data-symbol)
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

У дата-атрибутов есть свой собственный API. Читать и записывать значения дата-атрибутов элемента можно с помощью свойства dataset. С его помощью можно также и добавлять новые дата-атрибуты к элементу.

Можно обращаться к значениям атрибутов data-* также, как и к значениям других атрибутов: при помощи методов getAttribute и setAttribute для чтения и записи данных соответственно.

Прочитать значение атрибута:

        
          
          let attrValue = element.getAttribute('data-episode')
          let attrValue = element.getAttribute('data-episode')

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Записать новое значение 4 для атрибута data-episode:

        
          
          element.setAttribute('data-episode', '4')
          element.setAttribute('data-episode', '4')

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Атрибут просто с именем data не относится к дата-атрибутам, это обычный кастомный атрибут, который использовать не рекомендуется.

        
          
          <div data="noDataAtribute"></div>
          <div data="noDataAtribute"></div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Также, не стоит хранить в дата-атрибутах данные, которые должны быть видимы и доступны для вспомогательных технологий. К тому же, эти данные не индексируются поисковыми роботами.

Производительность чтения дата-атрибутов по сравнению с хранением этих данных в хранилищах данных JavaScript намного хуже, использование dataset ещё медленнее, чем чтение данных с помощью getAttribute.

Для пользовательских метаданных, которые связаны с элементами, дата-атрибуты это отличное решение. На практике часто можно увидеть применение дата-атрибутов в автоматизированном тестировании. Стандартным для многих тестовых фреймворков является атрибут data-testid.