В HTML разрешено добавлять свои, пользовательские
атрибуты тегам. Такие атрибуты должны начинаться
с data-, а затем должно идти любое
название атрибута, которое вам удобно.
Пользовательские атрибуты могут быть использованы огромным количеством различных способов. Многие из этих способов мы изучим далее в учебнике, а еще больше вы сможете в дальнейшем изобрести самостоятельно.
Обращение к таким атрибутам устроено не стандартным
образом. Нельзя просто обратиться к одноименному
свойству элемента, как мы делали это раньше,
а следует использовать специальное свойство
dataset, после которого через точку
пишется имя атрибута без data-. Например,
если наш атрибут называется data-test,
то для обращения к нему мы будем писать elem.dataset.test,
где elem - переменная с нашим элементом.
Давайте посмотрим на примере. Пусть у нас дан вот такой элемент:
<div id="elem" data-num="1000"></div>
Выведем на экран значение его атрибута data-num:
let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // выведет 1000
А теперь присвоим этому атрибуту другое значение:
let elem = document.querySelector('#elem');
elem.dataset.num = 123;
Дан следующий код:
<div id="elem" data-text="str">text</div>
Сделайте так, чтобы по клику на див в конец
его текста добавилось содержимое его атрибута
data-text.
Даны дивы, содержащие в атрибуте data-num
свой порядковый номер:
<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>
Сделайте так, чтобы по клику на любой из дивов ему в конец записывался его порядковый номер.
Дана кнопка. Сделайте так, чтобы эта кнопка считала количество кликов по ней, записывая их в какой-нибудь пользовательский атрибут. Пусть по клику на другую кнопку на экран выводится, сколько кликов было сделано по первой кнопке.
Дан инпут:
<input id="elem" data-length="5">
В этом инпуте в атрибуте data-length
содержится количество символов, которое нужно
ввести в инпут. Сделайте так, чтобы по потери
фокуса, если количество введенных символов
не совпадает с заданным, выводилось сообщение
об этом.
Дан инпут:
<input id="elem" data-min="5" data-max="10">
В этом инпуте атрибуты data-min и
data-max содержат диапазон. Сделайте
так, чтобы по потери фокуса, если количество
введенных символов не попадает в этот диапазон,
выводилось сообщение об этом.