??? ??? ??? ????? data-* ????????. ?? data , ?? ?? ?? - ?? ?? ?? ???? ??? ? ????.

??? ?? ? ??? ? ?????

<div data=""></div>

??? ??? ?? ?? ? ???,? ???? ????? ?? JavaScript API? ?? ?? ????. ??? ??? ???? ????? ????? ??? ??? ????.

??? ???? ????? ????

??? ? ??? ???? ??????. ???? ????? ??? ????? ?? ??? ??? ?? ?? ???? HTML ??? ???? ??? ??????.

<div data-name="Chris Coyier"></div>
<div>
  Chris Coyier
</div>

??? ??? ???? ?? ??? ?????.

??? ??? ??? ???

CSS? ?? ? ?? ?? ?? HTML ??? ??? ? ????.

 /*? ??? ?? ? ??? ??? ??????*/
[data-size = "large"] {
  ?? : 2REM;
  ?? ?? : 125%;
}
/* ?? ?? ??? ?? ?? ??? ?? ? ? ????*/
?? [data-type = "download"] {}
.card [data-pad = "extra"] {}

??? ??? ? ? ????. HTML/CSS? ?? ??? ?? ????? ???? ????? ( classList ?? ?? ???? ?? JavaScript ???? ????) ??? ??? ??? ??? ??? ?? ???? (????? ??? ?? ). data-* ??? ????? ??/?? ?? ? ??? ??? ???? ?? ???? ??? ??? ??? ?? ? ????.

 / * ???? ???? ?? */? ??????.
[??? ??] {}
/* ??? ?? ?? ??? ??*/
[data-state = "open"],
[aria-expanded = "true"] {}
/ * "?? ..."???, ??? "3"?? "3.14" */? ?? 3?? ???? ??? ????? ?? ?????.
[data-version^= "3"] {}
/ * "??"?? ?? ???? ?? ? ?? */
[Data-Company*= "Google"] {}

?? ???? ???

???? ??? ?????. ??? ????? ???? 4 ???? ???? ??? ?????.

??? ???, ID, ???/??, ??

??? ?? ?? ???? 0, 0, 1, 0 ???. ??? ?? ??? :

 div.card [data-foo = "bar"] {}

0, 0, 2, 1 ???. 2? ??? ( .card )? ?? ( [data-foo="bar"] )? ?? 1? ?? ( div )? ?? ?????.

?? ???? ???? ???? ??? ??/???? ?? ID?? ????.

??? ??? ?? ?

??? ???? ??? ?? ???? ?? ???? ?? ?? ???? ?? ?? ??? ??? ??? ?????.

 /*? ?????<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state = "Open"I] {}

??? ??? ???? ??? i ???.

?? ??? ??? ??????

CSS? ???? ??? ?? ?? ???? ??? ? ?? ? ? ????.

 /*<div data-emoji="?"> */
[data-emoji] :: ?? {
  ?? : attr (data-emoji); / * ?? '?' */
  ?? ??? : 5px;
}<h4> ??? ??? ?</h4>
<p> ??? ??? ???? ??? ????? ??? ? ?? ??? ? ????.</p>
<pre class="brush:php;toolbar:false"><div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>

JavaScript?? ??? ??? ??????

?? ??? ????? ?? ??? getAttribute ???? ?? ??? ? ? ????.

 value = el.getAttribute ( "data-state");
// ?? ??? ?? ????.
// return data-state = "??"
el.setattribute ( "data-state", "??");

??? ??? ???? ?? ? ?? API? ????. ?? ??? ????? ??? ??? ????? (????? ?????).

??? ??? ??? ??? ?? ??? ???? ?? ? ????.

 // get span.dataset.info; // 123
span.dataset.index; // 2
// span.dataset.prefix = "Mr.";
span.dataset.emojiicon = "?";

??? ?? ?? ???? ??????. HTML (? : data-this-little-piggy )? Kebab ??? ??? JavaScript (? : dataThisLittlePiggy )? Camel Nomenclature? ?? ?????.

? API? classList ?? ?? ???, classList ??, ??, ?? ? ??? ??? ??? ??? ???? ?? ??? ????.

??? ??? ???? ??? ? ?? ????.

??? ??? JSON ???

? ? ?? ??? JSON?? ??? ? ??? ?????? (??? ?). ???? ???? ??? ?? ?? ?? ? ? ????.

 const el = document.querySelector ( "li");
json = el.dataset.person? ??;
??? = JSON.PARSE (JSON);
Console.log (data.name); // Chris Coyier
Console.log (data.job); // ? ??

JavaScript ?? ??

??? ??? ??? ???? ??? HTML? ?? ? ??? ????. ?? ??? ???? ?? JavaScript? ????? ? ? ????.

???? ?? ?????? ??? ??? ????. "???"??? ??? ?????.

?

? ??? ???? ???? ??????? ??? ?? ???? ? ??? ?? AJAX ??? ???? ???? ?? ? ? ????. ??? ???? ?? ? ?? ??? ???? ? ???? ?? ????.

??

• ??? ?? 4 (?? ??)
• ??? ?? 3 (??)
• ??? ?? 2, ?? 1 (?? ??)

???? ??

? ????? Caniuse? ???? ???? ??? ??? ???? ????. ? ??? ???? ?? ??? ?? ?? ??? ??? ????? ?? ?????.

????

???/??? PC