必须用json.parse()显式解析data-*属性中的json字符串，并加try/catch处理空值或语法错误；dataset仅返回原始字符串，不自动解析，且驼峰转换规则限制属性名访问。
data-属性嵌套 JSON 字符串怎么安全解析
直接用 dataset 读取含 JSON 的 data- 属性会失败——它只返回字符串，不自动解析，更不会帮你处理语法错误或空值。你必须显式调用 JSON.parse()，且必须加 try/catch。
-
data-initial-state='{"count": 10, "items": []}'→ 必须写JSON.parse(el.getAttribute('data-initial-state')) - 如果服务端可能输出空字符串、
null或格式错误的 JSON（比如换行没转义），JSON.parse()会直接抛错，页面 JS 中断 - 别信
el.dataset.initialState：它返回的是原始字符串，不是对象；而且若属性名含大写或下划线（如data-initial-State），dataset根本访问不到
多个 data-属性如何批量转成 JS 对象
浏览器原生不提供“一键转对象”方法。dataset 看似能遍历，但它只映射符合驼峰规则的属性，漏掉所有含数字、大写、下划线、连字符开头的 data- 名——比如 data-1st-load、data-apiKey、data_user_id 全部消失。
- 安全做法是手动遍历
el.attributes，用正则筛出data-开头的属性：Array.from(el.attributes).filter(attr => attr.name.startsWith('data-')) - 提取时用
attr.name和attr.value，避免依赖dataset的驼峰转换逻辑 - 若需保留原始 key 名（如
data-user-id→ 键名保持"user-id"而非"userId"），就不能用dataset，必须自己构造对象
data-* 值里有 HTML 或多层嵌套结构怎么办
HTML 中的 data- 属性值本质是字符串，不支持嵌套标签或 DOM 结构。如果你看到类似 data-content="<div>hello</div>"，那只是纯文本，不是可操作的 DOM 节点。
- 想还原为真实 DOM？得用
DOMParser或临时div.innerHTML = value，但要注意 XSS 风险——绝不能对用户输入内容这么做 - 服务端渲染时若把整个表格 HTML 存进
data-table-html，前端解析后仍需手动遍历子节点，无法靠dataset自动展开层级 - 真正需要多层级数据建模，应该用
data-state存 JSON，而不是塞 HTML 字符串；否则后续维护成本极高，且无法用 CSS 选择器定位内部结构
jQuery 的 .data() 和原生 dataset 混用会丢数据
很多人以为 $el.data('config') 是 dataset.config 的封装，其实完全不是一回事：.data() 维护独立内存缓存，首次读取后就不再查 DOM，后续修改 data- 属性也不会更新缓存。
- 服务端输出了
data-config='{"a":1}'，JS 里先调$el.data('config')→ 缓存生效；再用$el.attr('data-config', '{"a":2}')→ DOM 更新了，但.data('config')还是旧值 - 想让其他 JS 或 CSS（如
[data-status="loading"]）感知变化，必须用.attr()或原生setAttribute()，不能只靠.data() - 跨框架协作时（比如 Vue 渲染后 jQuery 读取），务必确认双方用的是同一套读取路径，否则“明明设了却读不到”就是缓存和 DOM 不同步导致的
最易被忽略的一点：data-* 的设计初衷是轻量配置，不是通用数据容器。一旦你开始往里面塞 JSON 数组、嵌套对象、HTML 片段，就说明该用 <script type="application/json"></script> 或 API 加载了——强行塞进去只会让解析逻辑越来越脆弱，尤其在嵌套表格或 SSR 场景下，属性名稍一不规范，dataset 就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
