HTML allows you to add your own custom attributes
to tags. Such attributes should start with data-
followed by whatever attribute name you like.
Custom attributes can be used in a huge number of different ways. We will explore many of these methods later in the tutorial, and there are many more you can invent yourself later on.
Access to such attributes is not arranged in a
standard way. You can't just refer to the element's
property of the same name, as we did before, but
you should use the special property dataset
,
after which the attribute name is written using a
dot without data-
. For example, if our
attribute is called data-test
, then to
refer to it we will write elem.dataset.test
,
where elem
is a variable with our element.
Let's look at an example. Let's say we have the following element:
<div id="elem" data-num="1000"></div>
Let's display the value of its
data-num
attribute:
let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // shows 1000
Now let's assign this attribute a different value:
let elem = document.querySelector('#elem');
elem.dataset.num = 123;
Given the following code:
<div id="elem" data-text="str">text</div>
Make it so that when you click on the
div, the content of its data-text
attribute is added to the end of its text.
Given divs that contain their ordinal
number in the data-num
attribute:
<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>
Make it so that when you click on any of the divs, its ordinal number is written to the end.
Given a button. Make it so that this button counts the number of clicks on it, writing them to some custom attribute. Let on click on another button on the screen displays how many clicks were done on the first button.
Given an input:
<input id="elem" data-length="5">
In this input, the data-length
attribute
contains the number of characters to be entered
into the input. Make it so that when focus is
lost, if the number of characters entered does
not match the specified one, a message is
displayed about this.
Given an input:
<input id="elem" data-min="5" data-max="10">
In this input, the attributes data-min
and data-max
contain a range. Make it
so that when focus is lost, if the number of
characters entered does not fall within this
range, a message is displayed about this.