# Пользовательские атрибуты в JavaScript

В 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-nL"5">`

В этом инпуте в атрибуте `data-length` содержится количество символов, которое нужно ввести в инпут. Сделайте так, чтобы по потери фокуса, если количество введенных символов не совпадает с заданным, выводилось сообщение об этом.

Дан инпут:

`<input id="elem" data-min="5" data-max="10">`

В этом инпуте атрибуты `data-min` и `data-max` содержат диапазон. Сделайте так, чтобы по потери фокуса, если количество введенных символов не попадает в этот диапазон, выводилось сообщение об этом.

← →
↑
en ru