【翻译】详解HTML5 自定义 Data 属性

原标题：HTML5 Custom Data Attributes (data-*)

你是否曾经使用 class 或 rel 来保存任意的元数据，只为了使你的JavaScript更简单？如果你回答是的，那么我有一个令人激动的消息要告诉你！如果你回答不是，并且你还想，“咦，这个主意不错哦~”，那我劝你尽早放弃这个幼稚的想法，并看完本文。

多亏了HTML5，我们可以嵌入自定义的 data 属性给所有的HTML元素。这个 data 属性包含两部分：

属性名

属性名以'data-'前缀开头，并且至少要有一个字符。不可以包含大写字母。

属性值

属性值可以是任何字符串。

 

根据这个语法，我们可以添加应用数据信息给标签，如下所示：

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>

我们现在可以在JavaScript中使用这些保存的数据来创造更丰富有趣的用户体验。试想一下，当用户点击一颗蔬菜，一个新面板打开，向用户显示额外的种子间距和播种指示信息。因为有了data-属性，我们可以将数据添加给<li>标签，从而展示数据的时候不必进行Ajax，也不必进行服务器端的数据库查询，可以直接从属性中获取数据。

在自定义属性前使用data-前缀可以确保它会被浏览器忽略。对于浏览器和网站实际上的最终用户而言，该数据不存在。

标准上是这样说的（我们强调）：

自定义数据属性用于存储网页或应用程序的私有自定义数据，因为没有更合适的属性或元素。

这些属性不适用于独立于使用这些属性的网站的软件。

每个HTML元素都可以有任意数量的自定义属性与任何值。

 

如何使用？

 

因为自定义属性是HTML5，所以他们可以在任何支持HTML5的浏览器中使用。这便是全部了。除了协助向后兼容以外，这也确保自定义数据属性在未来仍将是一个可扩展的、跨平台的解决方案。

现在我们对数据属性有一个宽泛的理解，让我们看看他们如何使用：

• 存储可能需要在以后的JavaScript动画计算的元素的初始高度或不透明度
• 存储通过JavaScript加载的Flash动画的参数
• 存储自定义的网页标签数据，如同Jason Karns展示的
• 存储一个元素的健康，弹药或生命数据，在JavaScript游戏中
• 推动访问JavaScript <video>字幕，如同Bruce Lawson展示的

 

不应该做什么？

 

尽管很灵活，但数据属性并不适合解决所有问题。

• 如果有一个现有的属性或元素，适合你的数据存储，则不应使用数据属性。比如，在一个时间，日期/时间数据应该存放在语义化的时间元素里而不是存储在自定义数据属性里。
• 自定义数据属性不打算与微格式竞争。这在标准中清楚地说明了，数据不适合公开数据使用。外部软件不应与它进行交互。标记联系人详细信息或事件的细节使用自定义属性的数据是错的，当然，除非它是只供你自己的内部脚本使用。
• 特定数据属性的存在或缺失不应被用作任何样式的CSS钩子。这样做表明你存储的数据对用户而重要，应使用更语义化的标记。

 

通过JavaScript使用data-*属性

 

既然我们懂得了自定义数据属性是什么，以及我们什么时候可以使用它，现在我们应该看看我们如何使用JavaScript与它交互。

如果我们想使用原生JavaScript获取或修改这些属性，那么我们可以使用getAttribute和setAttribute方法，如下所示：

<div id='strawberry-plant' data-fruit='12'></div>

<script>
// getAttribute 获取数据属性
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// setAttribute 设置数据属性
plant.setAttribute('data-fruit','7'); // 因为该死的鸟……
</script>

此方法将在所有现代浏览器工作，但它不是数据属性原本的用法。第二个(新的和改进的)方式来实现同样的事情是通过访问一个元素的数据集属性。此数据集属性——新HTML5 JavaScript API的一部分——将返回所有选定的元素的数据属性的一个DOMStringMap对象。使用这种方法，不必使用完整的属性的名称，你可以抛弃数据前缀，直接使用自己定义的名称。属性的名称将会转换为驼峰命名式的名称。

<div id='sunflower' data-leaves='47' data-plant-height='2.4m'></div>

<script>
// dataset 获取属性 
var plant = document.getElementById('sunflower');
var leaves = plant.dataset.leaves; // leaves = 47;

// 'dataset 设置属性
var tallness = plant.dataset.plantHeight; // 'plant-height' -> 'plantHeight'
plant.dataset.plantHeight = '3.6m';  // 超级肥料！
</script>

如果某个数据属性不再需要，也可以通过设置它为null来完全移除该属性。

plant.dataset.leaves = null; // 毛毛虫攻击!

不幸的是，新的数据集属性尚未被所有浏览器中支持，所以同时最好如前面所示使用getAttribute和setAttribute。

开发应用程序时，你发现能够通过自定义的数据属性的值来选择元素。这可以快速、轻松地使用querySelectorAll实现，如下所示：

// 选择所有带有 'data-flowering' 属性的元素
document.querySelectorAll('[data-flowering]');

// 选择所有红叶子的元素
document.querySelectorAll('[data-foliage-colour="red"]');

 

最后一句忠告

 

随着数据属性越来越广泛的应用，发生命名冲突的可能性变得更大。如果你使用一个缺乏想象力的属性名称，如data-height，那么很可能你最终会遇到一个库或插件，它使用相同的属性名称。多个脚本获取和设置一个常见的数据属性可能会导致混乱。为了避免这种情况，我建议人们选择一个标准字(也许是该网站/插件的名称)作为所有数据属性的前缀， 比

如data-html5doctor-height 或者 data-my-plugin-height。

 

总结

 

自定义数据属性是一个用来简化网页中的应用程序数据的存储的很棒的方式。虽然你还不能只是利用新的javascriptAPI，但你可以享受getAttribute和setAttribute的便利，他们可以在所有主流浏览器上工作。

 

原文地址：http://html5doctor.com/html5-custom-data-attributes/