javascript - HTML5 中数据标签的简单解释/示例

Question

在你说有大量资源解释它之前，我要告诉你的是，我花了时间研究它，但仍然想知道一些东西:)

所以，我是网络开发的新手，在过去的几个月里，我在集成 HTML/CSS/JS 和一些 PHP 方面积累了很强的技能。然而，我用老派的“class”和“id”标签编写了我所有的标记、选择器等。现在我看到了更现代的风格，我看到很多网页使用数据标签。现在的问题是，这些标签是否可以以任何方式与"class" 和"id" 相关？如果是，那么它真正的核心优势是什么？我需要简单的例子来理解这个概念。是的，我知道它是一个自定义数据属性等等，但它比其他标签更有用的地方是什么？

非常感谢简单的例子和​​解释:)

Answer 1

我认为类和 ID 与 data-* 属性有不同的用途/目的。

例如，类有助于描述层次结构。某些类的成员获得某些状态和样式(来自 CSS)或不同的行为(例如来自 JavaScript)。 ID 类似，但它对一个组件是唯一的。因此，虽然它有时有助于描述元素的状态或样式，但它在针对 JavaScript 中的特定元素时也非常有用。

data-* 属性有很多用途。但它们存在的主要目的正如其名称所暗示的那样:保存有关元素的数据或信息。元素没有很多其他方法可以做到这一点。

来自 MDN :

for data that should be associated with a particular element but need not have any defined meaning

例如，假设您正在构建一个计算器应用程序。您有一个显示屏、一个键盘和按键。

每个键 都可以有类.key，这有助于描述它的状态/样式。每个键也可以有一个 ID(例如 #divide)，但是您如何进一步分割这些键来描述它们？

嗯，数字键可以有 data-type="operand"，加号、减号、减号等键可以有 data-type="operator"。您可能会争辩说您可能不会使用类 .operand 和 .operator，因为作为操作数或运算符并不是这些键的可变状态......相反，它是一个可区分的属性，不会像类那样进一步帮助描述键的状态。为什么要使用 data-type？好吧，正如 MDN 所说，我们使用它来代替虚构的属性，因为 div.key 没有原生 HTML type 属性。

为什么这有用？那么，在您的 JavaScript 中，您可以通过执行例如 $([data-type="operand"]).on('click', doSomething) 来定位这些键。这准确地描述了元素，以及您选择该元素的原因。如果您要使用一个类甚至一个 ID，完全相同的事情是可能的，但我认为在这种情况下，data-* 属性有助于从状态中抽象出属性和行为。