data-*

所有这些自定义数据都可以通过设置属性的元素的 HTMLElement 接口获得。 HTMLElement.dataset 属性可以访问它们。* 可以替换为任何遵循 XML 名称的生产规则 的名称，包括以下建议

• 名称不应以 xml（不区分大小写）开头，因为它保留供未来 XML 规范使用。
• 名称不应包含任何冒号字符 (:)，因为 XML 会将此类名称赋予特定含义。
• 名称不应包含任何大写字母，因为 XML 全部使用小写字母。

这些只是建议。如果不遵循这些命名建议，不会出现任何错误。属性仍然可以使用 CSS 的 属性选择器 进行匹配，属性不区分大小写，但属性值区分大小写。不符合这三个建议的属性也会被 JavaScript HTMLElement.dataset 属性识别，并且用户代理会将该属性包含在包含 HTMLElement 所有自定义数据属性的 DOMStringMap 中。

如果您计划使用 HTMLElement.dataset，则属性名称中 data- 之后的部分只能包含 JavaScript 属性名称中允许的字符（以及连字符，连字符将被删除）。dataset 版本的属性名称会删除 "data-" 前缀，并将名称的剩余部分从 kebab-case 转换为 camelCase。例如，element.getAttribute("data-test") 等效于 element.dataset.test，而 data-test-abc 将可以通过 HTMLElement.dataset.testAbc（或 HTMLElement.dataset["testAbc"]）访问。请避免使用连字符后面的非字母字符，例如 data-test-1 或 data--test，因为它们不会被 HTMLElement.dataset 识别。

通过添加 data-* 属性，即使是普通的 HTML 元素也可以变得相当复杂和强大，成为程序对象。例如，游戏中的一艘宇宙飞船 "精灵" 可以是一个简单的 <img> 元素，带有 class 属性和几个 data-* 属性

<img
  class="spaceship cruiserX3"
  src="shipX3.png"
  data-ship-id="324"
  data-weapons="laserI laserII"
  data-shields="72%"
  data-x="414354"
  data-y="85160"
  data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()" />

有关使用 HTML 数据属性的更深入教程，请参阅 使用数据属性。

• 所有 全局属性。
• 允许访问和修改这些值的 HTMLElement.dataset 属性。
• 使用数据属性