Html5 data атрибуты: Использование data-* атрибутов — Изучение веб-разработки

Leave a Comment / Html / By /

Содержание

.dataset — JavaScript — Дока

Кратко

Секция статьи «Кратко»

Свойство dataset позволяет считывать или устанавливать любые дата-атрибуты на HTML-элементе.

Дата-атрибут — это пользовательский атрибут на элементе, название которого начинается с data-, например data-testid. Дата атрибуты используются, чтобы хранить значения на элементах в HTML.

Как пишется

Секция статьи «Как пишется»

Обращение к свойству dataset вернёт объект со всеми дата-атрибутами, которые есть на элементе. Названиями полей в объекте будут имена дата-атрибутов после префикса data-. Например, если атрибут называется data-columns, то поле в объекте для этого атрибута будет называться columns.

<h2>Известные ситхи</h2><ul>  <li data-id="1541" data-episode="1">Дарт Мол</li>  <li data-id="9434" data-episode="4">Дарт Вейдер</li>  <li data-id="5549" data-episode="4">Дарт Сидиус</li></ul>
          <h2>Известные ситхи</h2>
<ul>
  <li data-id="1541" data-episode="1">Дарт Мол</li>
  <li data-id="9434" data-episode="4">Дарт Вейдер</li>
  <li data-id="5549" data-episode="4">Дарт Сидиус</li>
</ul>

const items = document.
 
 querySelectorAll('li')const firstItem = items[0]console.log(firstItem.dataset)// { id: '1541', episode: '1' }
          const items = document.querySelectorAll('li')
const firstItem = items[0]
console.log(firstItem.dataset)
// { id: '1541', episode: '1' }

Если дата-атрибутов на элементе нет, то вернётся пустой объект:

const heading = document.querySelector('h2')console.log(heading.dataset)// {}
          const heading = document.querySelector('h2')
console.log(heading.dataset)
// {}

Чтобы добавить дата-атрибут к элементу, нужно добавить новое поле в объект dataset. Название поля так же должно быть без префикса data-, браузер автоматически подставит его. В значениях атрибутов в HTML могут быть только строки, потому любое значение будет автоматически приведено к строке.

Возьмём тот же HTML из примера выше и добавим дата-атрибуты ко второму элементу:

const items = document.querySelectorAll('li')const secondItem = items[1]secondItem.
  dataset.side = 'evil'secondItem.dataset.age = 46secondItem.dataset.lightsaber = { color: 'red' }
          const items = document.querySelectorAll('li')
const secondItem = items[1]
secondItem.dataset.side = 'evil'
secondItem.dataset.age = 46
secondItem.dataset.lightsaber = { color: 'red' }

В результате получим такой элемент:

<li  data-id="9434"  data-episode="4"  data-side="evil"  data-age="46"  data-lightsaber="[object Object]">  Дарт Вейдер</li>
          <li
  data-id="9434"
  data-episode="4"
  data-side="evil"
  data-age="46"
  data-lightsaber="[object Object]">
  Дарт Вейдер
</li>

Все не строковые значения установленные в dataset будут приводиться к строке. Поэтому объект превращается в [object

Object], а число 46 превращается в строку "46".

Если в dataset добавить поле с пустым значением, то в HTML будет создан дата-атрибут без значения.

Использование camelCase и kebab-case

Секция статьи «Использование camelCase и kebab-case»

В dataset необходимо присваивать поля, название которых записывается в одно слово. Потому для составных имён используется только camelCase нотация. При попытке присвоить название в kebab-case будет выброшена ошибка.

const body = document.querySelector('body')body.dataset['dark-theme'] = true// Uncaught DOMException: Failed to set// a named property on 'DOMStringMap':// 'dark-theme' is not a valid property name.
          const body = document.querySelector('body')
body.dataset['dark-theme'] = true
// Uncaught DOMException: Failed to set
// a named property on 'DOMStringMap':
// 'dark-theme' is not a valid property name.

Дата-атрибуты, записанные в dataset с помощью camelCase, в HTML будут иметь названия в kebab-case. Браузер преобразует camelCase в kebab-case:

<ul>  <li>Иван Иванов</li></ul>
          <ul>
  <li>Иван Иванов</li>
</ul>

const item = document.querySelector('li')item.dataset.yearsOfExperience = 2item.dataset.candidateRole = 'junior'
          const item = document.querySelector('li')
item.dataset.yearsOfExperience = 2
item.dataset.candidateRole = 'junior'

После выполнения кода выше получится следующий HTML:

<ul>  <li data-candidate-role="junior" data-years-of-experience="1">Иван Иванов</li></ul>
          
 
<ul>
  <li data-candidate-role="junior" data-years-of-experience="1">Иван Иванов</li>
</ul>

Преобразование названий работает и в обратную сторону – дата-атрибут на HTML-элементе, записанный в kebab-case, будет превращён в dataset в camelCase.

<ul>  <li data-candidate-role="junior">Иван Иванов</li></ul>
          <ul>
  <li data-candidate-role="junior">Иван Иванов</li>
</ul>

const item = document.querySelector('li')console.log(item.dataset)// { candidateRole: 'junior' }
          const item = document.querySelector('li')
console.log(item.dataset)
// { candidateRole: 'junior' }

Удаление дата-атрибута

Секция статьи «Удаление дата-атрибута»

Удалить дата-атрибут можно только с помощью оператора delete. Если попытаться присвоить к полю значение undefined или null, то браузер просто присвоит атрибуту строку 'undefined' или 'null'.

Возьмём следующий HTML:

<div data-testid="test">Любое содержимое<div>
          <div data-testid="test">Любое содержимое<div>

При установке undefined в значение дата-атрибута, он не удалится с элемента.

const element = document.querySelector('div')element.dataset.testid = undefined
          const element = document.querySelector('div')
element.dataset.testid = undefined

В результате получится следующий HTML:

<div data-testid="undefined">Любое содержимое<div>
          <div data-testid="undefined">Любое содержимое<div>

Если использовать оператор delete, то получим элемент без дата-атрибута.

delete element.dataset.testid
          delete element.dataset.testid

<div>Любое содержимое</div>
          <div>Любое содержимое</div>

Свойство dataset защищено от перезаписи. Это значит что попытка присвоить в dataset новое значение будет проигнорирована.

const element = document.querySelector('div')// Ничего не произойдёт, дата-атрибуты на элементах тоже не изменятсяelement.dataset = {}element. dataset = 'string'
          const element = document.querySelector('div')
// Ничего не произойдёт, дата-атрибуты на элементах тоже не изменятся
element.dataset = {}
element.dataset = 'string'

Как понять

Секция статьи «Как понять»

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

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

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

В теории для такой же цели можно использовать и обычный идентификатор id, но цель у этого атрибута совсем другая. Плюс спецификация требует чтобы значение атрибута id было уникальным на всем странице.

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

Браузер даёт возможность управлять дата-атрибутами через специальное API dataset.

На практике

Секция статьи «На практике»

Егор Огарков советует

Секция статьи «Егор Огарков советует»

🛠 Дата-атрибут можно использовать для применения стилей. Элементы можно выделять CSS-селектора по атрибуту:

[data-id] {  /* Селектор для всех элементов с data-id */}[data-id="123"] {  /* Селектор только для элементов с data-id="123" */}
          [data-id] {
  /* Селектор для всех элементов с data-id */
}
[data-id="123"] {
  /* Селектор только для элементов с data-id="123" */
}

Найти элемент с data-id="123":

const element = document. querySelector('[data-id="123"]')
          const element = document.querySelector('[data-id="123"]')

🛠 Некоторые фреймворки во время компиляции самостоятельно генерируют дата-атрибуты и присваивают их к элементам, чтобы делать изоляцию CSS.

🛠 Дата-атрибуты широко используются в автоматизированном тестировании. Для этого на необходимых элементах расставляют дата-атрибуты и тест обращается к ним. В документациях к различным библиотекам для тестирования часто можно встретить атрибут data-testid.

Js data атрибуты — Ось Х

Блог разработчика

Автор adm-pcst На чтение 2 мин Просмотров 83 Опубликовано

Содержание

  1. Как узнать data атрибут JS?
  2. Что такое атрибут data?
  3. Как добавить Дата атрибут через JS?
  4. Что такое атрибуты в JS?
  5. Для чего нужны атрибуты начинающиеся с data -?
  6. Как получить Дата атрибут jQuery?
  7. Как получить значение атрибута?
  8. Сколько согласно документации существует типов узлов?
  9. Как работает setAttribute JS?

Как узнать data атрибут JS?

Доступ в JavaScript

Чтобы получить data —атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data— (обратите внимание, что дефисы в имени преобразуются в camelCase). Каждое свойство является строкой и может быть прочитано и записано.

Что такое атрибут data?

Атрибут data-*

Позволяет создавать свои атрибуты для хранения произвольной информации. Данные могут быть получены с помощью скриптов или через стилевую функцию attr().

Как добавить Дата атрибут через JS?

Чтобы добавить дата—атрибут к элементу, нужно добавить новое поле в объект Element. dataset . Название поля так же должно быть без префикса data- , браузер автоматически подставит его. В значениях атрибутов в HTML могут быть только строки, потому любое значение будет автоматически приведено к строке.

Что такое атрибуты в JS?

attributes : коллекция объектов, которая принадлежит ко встроенному классу Attr со свойствами name и value . У HTML-атрибутов есть следующие особенности: Их имена регистронезависимы ( id то же самое, что и ID ). Их значения всегда являются строками.

Для чего нужны атрибуты начинающиеся с data -?

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

Как получить Дата атрибут jQuery?

Выполнение действий над атрибутами data в jQuery обычно осуществляется с помощью методов: attr и removeAttr . Данный метод (attr) возвращает значение data-атрибута в виде строки. Например, добавим атрибут data-year к вышеприведённому элементу: $(‘#phone-1’).

Как получить значение атрибута?

Доступ к атрибутам осуществляется при помощи стандартных методов:

  1. hasAttribute(name) – проверяет наличие атрибута
  2. getAttribute(name) – получает значение атрибута
  3. setAttribute(name, value) – устанавливает атрибут
  4. removeAttribute(name) – удаляет атрибут

Сколько согласно документации существует типов узлов?

Даже объект document , представляющий весь документ, формально является DOM-узлом. Существует 12 типов узлов.

Как работает setAttribute JS?

Метод setAttribute() предназначен для добавления в элемент нового атрибута с указанным значением. Если указанный атрибут уже существует, то значение этого атрибута изменяется на значение, переданное методу в качестве второго аргумента.

Данные HTML-* Атрибут

❮ Предыдущий Все атрибуты HTML Далее ❯

Определение и использование

Атрибут data-* используется для хранения пользовательских данных, закрытых для страницы или заявление.

Атрибут data-* дает нам возможность встраивать пользовательские атрибуты данных в все HTML-элементы.

Сохраненные (пользовательские) данные затем можно использовать в JavaScript страницы для создания более привлекательный пользовательский интерфейс (без каких-либо вызовов Ajax или серверной базы данных запросы).

Атрибут data-* состоит из двух частей:

  1. Имя атрибута не должно содержать заглавных букв и должно быть не менее одного символа после префикса «data-»
  2. Значением атрибута может быть любая строка

Примечание. Пользовательские атрибуты с префиксом «data-» будут полностью игнорируется пользовательским агентом.

Относится к

Атрибут data-* является глобальным атрибутом и может использоваться в любом элементе HTML.

Элемент Атрибут
Все элементы HTML данные-*

Пример

Пример

Используйте атрибут data-* для встраивания пользовательских данных:


     
  • Owl

    •  
  • Лосось

    •  
  • Тарантул

Попробуйте сами »

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает атрибут.

Атрибут
данные-* 4,0 5,5 2,0 3. 1 9,6

❮ Предыдущий Все атрибуты HTML Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

| О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

набор данных и атрибуты data-* | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

набор данных и атрибуты data-*

— ЛС

  • Глобальное использование
    98,65% + 1,32% знак равно 99,97%

Метод применения пользовательских данных к элементам и доступа к ним.

Chrome
  1. 4 — 6: Частичная поддержка
  2. 24% — Supported»> 7 — 44: Поддерживается
  3. 45 — 54: Поддерживается
  4. 55 — 106: Поддержка
  5. 107: Поддержка
  6. 108 -11023
  7. 107: поддержал
  8. 108 -110113. .

    1111111111111111111111110 гг.

    1. 12–16: поддерживается
    2. 17–106: поддерживается
    3. 107: поддерживается
    Safari
    1. 3.1–5: частичная поддержка
    2. 5.1 — 16.0: Supported
    3. 16.1: Supported
    4. 16. 2 — TP: Supported
    Firefox
    1. 2 — 5: Partial support
    2. 6 — 50: Supported
    3. 51 — 105: Supported
    4. 106: Поддерживается
    5. 107 — 108: поддержан
    Opera
    1. 9 — 11: Частичная поддержка
    2. 11,1 — 12,1: Поддержано
    3. 15 — 31: поддержан
    4. 32 — 41: 70023333.
    5. 2444444424444444444444444444444444444444444444444444444444444444444444444444444
    6. 92: Поддерживается
    IE
    1. 5,5 — 10: Частичная поддержка
    2. 44% — Supported»> 11: Поддерживается
    Chrome для Android
    1. 107: поддержал
    1. 107: поддержал
      .
    1. 5 — 16,0: поддержано
    2. 16,1: Поддерживается
    Samsung Internet
    1. 4 — 18,0: поддержано
    2. 19,0: Поддержано
    Opera Mini Mini
    911
  9. .0023
Opera Mobile
  1. 10 — 11: Partial support
  2. 11.1 — 12.1: Supported
  3. 72: Supported
UC Browser for Android
  1. 64% — Supported»> 13.4: Supported
Android Browser
  1. 2.1 — 2.3 : Частичная поддержка
  2. 3 — 4.4.4: Поддерживается
  3. 107: Поддерживается
Firefox для Android
  1. 106: Поддерживается
Поддерживается QQ Browser
  • 2
  • 023
    Baidu Browser
    1. 13.18: Поддержано
    KAIOS Browser
    1. 2.5: Поддерживаемые

    Частичная поддержка возврат к использованию DATA-* ATTRIBUTES . Получите их.

    «Поддерживается» относится к доступу к значениям с использованием свойства набора данных .

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

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