原标题：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-前缀可以确保它会被浏览器忽略。对于浏览器和网站实际上的最终用户而言，该数据不存在。

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

<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>

<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>

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

// 选择所有带有 'data-flowering' 属性的元素

document.querySelectorAll('[data-flowering]');

// 选择所有红叶子的元素

document.querySelectorAll('[data-foliage-colour="red"]');

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