数据属性的重点是什么？

Question

在阅读this question的答案后，我的思绪就像一个融化的冰淇淋蛋筒。

考虑到您可以为DOM元素分配任意属性。

e.g。

＆＃13;

＆＃13;

var myDiv = document.createElement('div');
myDiv.potato = ["puppies", "sea otters"]

alert(myDiv.potato);

＆＃13;

＆＃13;

＆＃13;

整个data-*惯例的重点是什么？

它在分配任意属性方面有什么优势？

Answer 1

保证它们不会与真实属性（在当前或未来的规范中）发生冲突。

验证标记时不会产生噪音。

维护代码知道HTML的人会知道data-*属性用于什么类型的事情，并且不会混淆尝试查找他们可能认为他们没有听说过的属性。< / p>

Answer 2

将它们放入HTML：

<span data-tooltip="I will be processed by JavaScript and displayed in a tooltip,
    but because I am content, I belong in the HTML, so... here I am!">Hello!</span>

在CSS中使用它们：

<span data-number="1">Hello?</span>
[data-number]:before {content: attr(data-number) '. '}

还有更多的用途，但这些是立即浮现在脑海中的两个。