data-*属性_如何使用HTML5 Data- *属性构建更好的UX

您是否曾经想过将自定义数据添加到特定HTML元素以便以后使用JavaScript进行访问？ 在HTML5投放市场之前，存储与DOM相关联的自定义数据确实是大惊小怪，开发人员必须使用各种讨厌的技巧，例如引入非标准属性或使用过时的setUserData（）方法来解决此问题。 。

幸运的是，您不必再这样做了，因为HTML5引入了新的全局data-*属性 ，使您可以在任何HTML元素上嵌入额外的信息。 新的data-*属性使HTML更具可扩展性 ，因此使您能够构建更复杂的应用程序 ，并创建更复杂的用户体验，而无需使用诸如Ajax调用或服务器端数据库查询之类的资源密集型技术。

新的data-*属性的语法类似于aria前缀属性的语法。 您可以插入任何小写字符串来代替*符号。 您还需要以字符串形式为每个属性分配一个值。

假设您要创建“ 关于我们”页面，并存储每个员工工作所在部门的名称。 除了通过以下方式将data-department自定义属性添加到适当HTML元素之外，您无需执行其他任何操作：

<ul>
	<li data-department="Marketing">
		John Doe
	</li>
	<li data-department="IT">
		Jane Doe
	</li>
</ul>

自定义data-*属性是全局属性，就像class和id属性一样，因此您可以在每个HTML元素上使用它们。 您还可以根据需要向HTML标签添加任意多个data-*属性。 例如，在上面的示例中，您可以引入一个名为data-user的新自定义属性来存储员工用户名。

<ul>
	<li id="john" class="employee" data-department="Marketing" 
	data-user="johndoe">
		John Doe
	</li>
	<li id="jane" class="employee" data-department="IT" 
	data-user="janedoe">
		Jane Doe
	</li>
</ul>

通常，如果要将自己的自定义属性添加到HTML元素，则始终必须在其data-加上data-字符串。 同样，当您在其他人的代码中看到数据前缀的属性时，您可以肯定地知道它是由作者引入的自定义属性。

何时使用和何时不使用自定义属性

W3C 定义自定义data-*属性，如下所示：

仅将它们用于样式目的不是最好的主意，因为您可以从class和style属性中进行选择。 如果要存储HTML5具有语义属性的数据类型（例如<time>元素的datetime属性），请使用它代替数据前缀属性。

重要的是要注意， data-*属性保存的数据是页面或应用程序专用的 ，这意味着它们将被用户代理 （例如搜索引擎机器人和外部应用程序）忽略。 带有数据前缀的属性只能由托管HTML的网站上运行的代码访问。

自定义data-*属性也被Bootstrap和Zurb Foundation等前端框架广泛使用。 好消息是，如果您想使用数据前缀的属性作为框架的一部分，则不必知道如何编写JavaScript，因为您只需将它们添加到HTML代码中即可触发HTML的功能。预先编写JavaScript插件。

下面的代码片段通过使用data-toggle和data-placement自定义属性，并为它们分配适当的值，在Bootstrap中向按钮的左侧添加了一个工具提示 。

<button type="button" class="btn btn-default" data-toggle="tooltip" 
data-placement="left" title="Tooltip on left">
	Tooltip on left
</button>

Target

尽管不建议仅将data-*属性用于样式目的，但是您可以在常规属性选择器的帮助下选择它们所属HTML元素。 如果要选择具有特定数据前缀属性的每个元素，请在CSS中使用以下语法：

li[data-user] {
	color: blue;
}

请注意，在上面的代码段中，不是用户名会以蓝色显示（在自定义属性中存储的所有数据都不可见之后），而是<li>元素中包含的员工名称（在示例中为“ John Doe” ”和“简·多伊”）。

如果只想选择数据前缀属性采用某个值的元素，则使用以下语法：

li[data-department="IT"] {
	border: solid blue 1px;
}

您可以将所有更复杂CSS属性选择器 （例如，通用的同级组合器选择器（ [data-value~="foo"] ）或通配符选择器（ [data-value*="foo"] ）与data-带有前缀的属性。

使用JavaScript访问

您可以使用数据集属性或jQuery的data()方法，使用JavaScript访问存储在custom data-*属性中的data() 。

dataset属性是HTMLElement接口的属性，这意味着您可以在任何HTML标记上使用它。 dataset属性可访问给定HTML元素的所有自定义data-*属性。 属性以DOMStringMap对象的形式返回， DOMStringMap对象为每个data-*属性包含一个条目。

在我们的关于我们页面示例中，您可以通过以下方式使用dataset属性轻松检查“ Jane Doe”具有的自定义属性：

var jane = document.getElementById("jane"); 
console.log(jane.dataset);
// DOMStringMap { user: "janedoe", department: "IT" }

您可以看到，在返回的DOMStringMap对象中， data-前缀已从属性名称中删除（ user而不是data-user ， department而不是data-department ）。 如果只想访问某个数据前缀属性的值（而不是像上面的代码片段中那样的所有自定义属性的列表），则需要使用相同格式的属性。

您可以检索特定data-*属性的值作为dataset属性的属性。 如前所述，您需要在属性名称中省略data-前缀，因此，如果要访问Jane的data-user属性的值，可以采用以下方式：

var jane = document.getElementById("jane"); 
console.log(jane.dataset.user)
// janedoe

jQuery的data()方法使获取数据前缀属性的值成为可能。 在这里，您还必须从属性名称中省略data-前缀以正确访问它。 在我们的示例中，您可以使用以下代码显示一条警报消息，其中包含“简”所在部门的名称：

$("#jane").hover( function() {
	var department = $("#jane").data("department");
	alert(department);
});

var town = $("#jane").data("town", "New York");

用jQuery的data()方法附加的额外数据显然不会在HTML代码中显示为新的data-*属性，因此，如果同时使用这两种技术，则给定HTML元素将存储两组数据，一个使用HTML，另一个使用jQuery。

在我们的示例中，“ Jane”使用jQuery获得了新的自定义数据（ "town" ），但是这个新的键值对不会在HTML中显示为新的data-town属性。 至少可以说，以两种不同的方式存储数据并不是最佳实践，因此只能一次使用两种方法之一 。

辅助功能和

由于保存在自定义data-*属性中的data-*是私有data-* ，因此辅助技术可能无法访问它。 如果您想让残障用户可以访问自己的内容，则不建议以这种方式存储对用户来说很重要的内容。

翻译自: https://www.hongkiat.com/blog/better-ux-html-data-attributes/