HTML元素拓展：data-*属性的应用与实践

---

1、定义

• data-* 属性用于存储页面或应用程序的私有自定义数据，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

• 如，百度官方页面中：
  

• 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

• data-* 属性由两部分组成：

  • 属性名：不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
  • 属性值：可以是任意字符串
    • 注意：用户代理会完全忽略前缀为 “data-” 的自定义属性。

2、用法举例

举例：

使用 data-* 属性

<div id="example" data-my-custom-attribute="some value">Hello World</div>

访问 data-* 属性

• 在JavaScript中，可以通过元素的dataset属性来访问data-*属性的值。dataset属性返回一个类似对象的Map，其中的键名是data-*属性去除data-前缀后的部分，所有连字符会被转换成驼峰式命名法（camelCase）。

var element = document.getElementById('example');

console.log(element.dataset.myCustomAttribute); // 输出: "some value"

• data-*命名也可以使用驼峰格式，但需要注意访问方式：

使用 data-* 属性

<div id="example1" data-my-custom-attribute="some value1">Hello World</div>
<!-- 驼峰写法 -->
<div id="example2" data-myCustomAttribute="some value2">Hello World</div>

访问 data-* 属性

var element = document.getElementById('example1');
console.log(element.dataset.myCustomAttribute); // 输出: "some value1"

// 驼峰写法，大写的字母需要转换为小写才能获取到，否则就是undefined
var element = document.getElementById('example2');
console.log(element.dataset.mycustomattribute); // 输出: "some value2"

2、应用场景

data-* 属性可用于多种场景：

• 存储额外的元数据：例如，存储某个元素的状态或与之关联的额外信息。

<article data-author="John Doe" data-published="2023-01-01">
    <h1>Article Title</h1>
    <p>Article content...</p>
</article>

<script>
	const article = document.querySelector('article');
	console.log(article.dataset.author); // 输出: "John Doe"
	console.log(article.dataset.published); // 输出: "2023-01-01"
</script>

• 触发特定行为：结合JavaScript，可以根据data-*属性的值来执行某些功能。

<button data-action="show-modal">Click me</button>
<div id="modal" style="display:none;">This is a modal.</div>

<script>
	document.querySelector('button').addEventListener('click', function() {
	    const action = this.dataset.action;
	    if (action === 'show-modal') {
	        document.querySelector('#modal').style.display = 'block';
	    }
	});
</script>

• 模板引擎：在服务器端渲染或客户端模板引擎中，data-*属性可以用来填充动态内容。

<template>
  <div>
    <button :data-message="message">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  }
};
</script>

• CSS选择器：也可以通过:has([data-*])伪类（在支持的浏览器中）在CSS中选择具有特定data-*属性的元素。

<p data-highlight>This paragraph will have a yellow background.</p>
<p>This paragraph will not.</p>

/* 选择所有具有 data-highlight 属性的元素 */
[data-highlight] {
    background-color: yellow;
}

<p data-highlight>This paragraph will have a yellow background.</p>
<p data-highligh='true'>This paragraph will not.</p>

/* 选择所有具有 data-highlight 属性的元素 */
[data-highlight] {
    background-color: yellow;
}
/* 选择所有 data-highligh='true' 的元素 */
[data-highligh='true'] {
     background-color: red;
}

请注意，第四种用途中使用的CSS选择器[data-highlight]在现代浏览器中是被支持的，但并不是所有浏览器都支持更复杂的data-*属性选择器，例如[data-highlight=“true”]。在使用更复杂的data-*选择器时，建议检查浏览器兼容性或使用JavaScript来实现更复杂的选择逻辑。