用getAttribute()遍历最稳：el.attributes过滤data-属性后调用getAttribute取值，避免dataset局限性、状态错乱及SSR时undefined问题。
直接用 getAttribute() 遍历最稳，别依赖 dataset 做批量读取——它不暴露非法命名属性，也不反映动态新增项，循环中混用还容易状态错乱。
怎么安全地批量读取所有 data-* 属性
浏览器不会把所有 data-* 属性塞进 dataset 对象里，只映射符合规范（全小写+连字符）的那些；而 dataset 本身是只读代理，没有 keys() 或 entries() 方法。真要循环，得从元素的全部属性入手：
- 用
el.attributes获取所有属性节点，再过滤出以"data-"开头的 - 对每个匹配项，用
attr.name提取原始名（如"data-user-id"），再用el.getAttribute(attr.name)取值 - 避免用
for...in遍历dataset—— 它不是普通对象，遍历行为不可靠
示例：
const el = document.querySelector('div');
const dataAttrs = {};
for (const attr of el.attributes) {
if (attr.name.startsWith('data-')) {
dataAttrs[attr.name] = el.getAttribute(attr.name);
}
}
// dataAttrs 是 { 'data-user-id': '101', 'data-is-active': 'true' } 形式
循环写入多个 data 属性时，为什么 dataset.xxx = yyy 不生效
因为 dataset 赋值只是更新内部缓存，不触发 DOM 属性写入；尤其在首次设置一个新 data- 属性时，dataset.newKey = 'val' 根本不会生成对应 HTML 属性。
立即学习“前端免费学习笔记（深入）”；
- 必须用
el.setAttribute('data-key', value)才能真正添加或更新 - 批量写入推荐：
Object.entries(dataObj).forEach(([k, v]) => el.setAttribute(`data-${k}`, v)) - 不要先
dataset.foo = 'a'，再setAttribute('data-foo', 'b')—— 后者不会刷新dataset.foo的值，下次读还是'a'
循环处理时类型转换最容易翻车的三个点
所有 data-* 值本质是字符串，循环中若不做显式转换，计算、判断、JSON 解析全会出错：
- 数字比较：不能
if (el.dataset.count > 10)，得写Number(el.dataset.count) > 10或+el.dataset.count > 10 - 布尔判断：不能
if (el.dataset.active)（"false"也是真值），应写el.dataset.active === 'true' - JSON 数据：不能直接
el.dataset.config.theme，得先JSON.parse(el.dataset.config || '{}')，且加try/catch防服务端输出未转义导致解析失败
表格行循环打标时，data 属性要不要删掉再设
不需要删。反复 setAttribute('data-selected', 'true') 就够了；删除反而增加 DOM 操作开销，还可能因异步导致状态残留。
- 设为 false 场景：直接
el.setAttribute('data-selected', 'false')，别用removeAttribute然后靠in判断是否存在 - 清空整行 data：用
el.removeAttribute('data-selected')，但之后el.dataset.selected仍返回undefined，不是空字符串 - 注意：循环中频繁读写同一元素的多个
data-属性，可能触发隐式布局抖动，建议先读到局部变量再统一处理
最常被忽略的是：服务端渲染（SSR）页面首次加载时，dataset 还没初始化，此时循环读取会全返回 undefined；必须用 getAttribute() 才能拿到原始 HTML 里的值。
