最规范推荐的方式是使用 dataset API，它自动处理驼峰式到短横线命名转换，如 element.dataset.userName = "Alice" 生成 data-user-name="Alice"；也可用 setAttribute 精确设置，但需注意命名规则与数据类型。
在 JavaScript 中给节点设置自定义 data 属性，最规范、推荐的方式是使用 dataset API，它专为操作 data-* 属性而设计，语义清晰且自动处理命名转换。
用 dataset 设置 data 属性（推荐）
dataset 是元素的只读属性，返回一个 DOMStringMap 对象。设置时直接赋值即可，属性名会自动从驼峰式转为短横线分隔（例如 data-user-id 对应 dataset.userId）：
-
element.dataset.userName = "Alice"→ 渲染为data-user-name="Alice" -
element.dataset.apiUrl = "/api/users"→ 渲染为data-api-url="/api/users" - 若属性含数字或特殊字符（如
data-123-id），需用方括号语法：element.dataset["123Id"] = "abc"
用 setAttribute 直接设置（兼容旧环境）
适用于需要精确控制属性名、或需设置非标准命名（如全小写带短横线）的场景：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
element.setAttribute("data-role", "admin")→ 添加data-role="admin" -
element.setAttribute("data-is-active", "true")→ 添加data-is-active="true" - 注意：用此方法设置后，
dataset仍可读取（如dataset.isActive），但不会自动同步更新已存在的驼峰键名映射
注意事项和常见误区
避免直接操作 attributes 或用点号添加非标准属性（如 element.dataRole = "admin"），这类写法不会生成 HTML 属性，也不被 dataset 或 CSS 选择器识别。
立即学习“Java免费学习笔记（深入）”；
-
data-属性名必须以字母开头，可含字母、数字、短横线、下划线、冒号、点号；但建议只用字母、数字和短横线 - 布尔值建议用字符串
"true"/"false"，而非 JS 布尔字面量（dataset总是返回字符串） - 通过
dataset删除属性用delete element.dataset.xxx；用removeAttribute("data-xxx")更通用
简单示例：动态设置并读取
假设有一个按钮：<button id="btn">点击</button>
const btn = document.getElementById("btn");
btn.dataset.userId = "1001";
btn.dataset.category = "premium";
console.log(btn.dataset.userId); // "1001"
console.log(btn.outerHTML); // <button id="btn" data-user-id="1001" data-category="premium">点击</button>
不复杂但容易忽略细节 
