<p>dataset 是只读映射，赋值不更新 DOM；必须用 setAttribute 或 jQuery 的 attr() 才能真正写入 data-* 属性，且键名须小写连字符、值为字符串，非法字符会被浏览器丢弃。</p>
不能用 dataset 批量设置 data 属性——它只读，写入无效；必须用 setAttribute 或 jQuery 的 attr()。
为什么 dataset 赋值后 DOM 不更新
很多人写 el.dataset.userId = "123" 看似成功，但检查 el.outerHTML 或用 CSS 选择器 [data-user-id] 匹配时发现属性根本没写入。这是因为 dataset 是浏览器解析 HTML 后生成的只读映射副本，不是双向绑定代理。
-
dataset只在元素首次加载时从 HTML 中提取一次，后续修改不会回写到 DOM 树 -
el.setAttribute('data-user-id', '123')才真正插入或更新属性节点 - 混用会导致不一致：先
dataset.userId = "a"，再setAttribute('data-user-id', 'b')，之后dataset.userId仍返回"a"
原生 JS 批量设置多个 data-* 属性
对单个元素批量设多个 data 属性，推荐用 Object.entries() 配合循环，避免重复写 setAttribute：
const el = document.querySelector('.card');
const dataProps = {
'user-id': '1001',
'status': 'active',
'sort-order': 'desc',
'api-version': 'v2'
};
<p>Object.entries(dataProps).forEach(([key, value]) => {
el.setAttribute(<code>data-${key}</code>, value);
});
- 键名用小写+连字符（如
'user-id'），不要驼峰或下划线，否则浏览器不识别 - 值始终是字符串，即使传数字，
setAttribute也会自动转成字符串 - 如果 key 是动态拼接的（如
data-${prefix}-id），确保prefix内容合法（不含空格、大写、点号）
jQuery 批量设置 data-index 这类分组属性
当需要按逻辑分组赋值（比如每 3 个元素共用一个 data-index="3"，接着三个为 "6"），核心是把索引 i 映射为组号，再算目标值：
立即学习“前端免费学习笔记（深入）”；
$('.item').each(function(i) {
const groupSize = 3;
const startIndex = 3;
const step = 3;
const groupIndex = Math.floor(i / groupSize);
const value = startIndex + groupIndex * step;
$(this).attr('data-index', value);
});
- 必须用
.attr('data-index', value)，不是.data('index', value)——后者只存 JS 缓存，不写 DOM -
Math.floor(i / groupSize)是关键，它把i = 0,1,2,3,4,5分成0,0,0,1,1,1 - 若元素是动态插入的，这段代码必须在插入 DOM 后立即执行，否则选不到新节点
最易被忽略的一点：data-* 属性名一旦含非法字符（如大写字母、点号、开头数字），浏览器直接丢弃，DOM 中查无此属性，dataset 和 getAttribute 都拿不到——命名阶段就要卡死规范，别等运行时报 undefined 才回头改 HTML。
