data-*属性转dataset键名时连字符变驼峰（如user-id→userId），值恒为字符串，须手动类型转换；修改需用setAttribute而非直接赋dataset；事件委托中应通过closest定位带data属性的祖先元素。
data-\* 属性命名规则和 dataset 键名转换关系
HTML 中 data- 开头的自定义属性，浏览器会自动映射到元素的 dataset 对象上，但键名不是原样保留：带连字符的属性名（如 data-user-id）会被转成驼峰式（userId），所有连字符后字母大写，且连字符被移除。下划线（data_user_id）和数字开头（data-1st-login）不合法，会被忽略。
常见错误现象：element.dataset["user-id"] 返回 undefined，因为 dataset 只支持点语法或方括号访问驼峰键，不支持原始连字符形式。
-
data-user-id→element.dataset.userId -
data-api-url→element.dataset.apiUrl -
data-is-active→element.dataset.isActive -
data-foo-bar-baz→element.dataset.fooBarBaz
dataset 读取值始终是字符串类型
dataset 返回的所有值都是字符串，即使你存的是 data-count="42" 或 data-enabled="true"，读出来仍是 "42" 和 "true"，不会自动类型转换。业务逻辑中直接用 == 或 === 比较容易出错。
使用场景：需要做数值计算、布尔判断或 JSON 解析时，必须手动转换。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 数值：用
Number(element.dataset.count)或一元加号+element.dataset.count - 布尔：用
element.dataset.enabled === "true"（推荐显式比较字符串），而不是Boolean(element.dataset.enabled)（空字符串也会转为false，但data-enabled=""和缺失该属性行为不同） - JSON 数据：先用
JSON.parse(element.dataset.config)，但需确保内容是合法 JSON 字符串（注意引号转义）
动态设置 data-\* 属性必须用 setAttribute，不能直接赋值 dataset
dataset 是只读代理对象，修改它（如 el.dataset.userId = "1001"）在部分旧版浏览器（如 Safari ≤ 15.4）可能无效，或不触发 DOM 更新。可靠方式是统一用 setAttribute。
性能影响：频繁操作多个 data- 属性时，逐个 setAttribute 比批量更新更清晰；若配合框架（如 React/Vue），应避免直接操作 dataset，优先走响应式数据流。
- ✅ 正确：
el.setAttribute("data-user-id", "1001") - ❌ 不可靠：
el.dataset.userId = "1001"（尤其在监听DOMSubtreeModified或 MutationObserver 时可能错过） - ⚠️ 注意：
removeAttribute("data-user-id")才能真正删除，delete el.dataset.userId无效
dataset 在事件委托中读取的典型陷阱
给父容器绑定事件并用 e.target.dataset 读子元素数据时，要小心事件目标是否真的是带 data- 的元素——比如点击了按钮内的图标，e.target 可能是 <i></i> 标签，它没有 dataset 属性，导致读不到。
兼容性影响：IE11 支持 dataset，但不支持驼峰转换（如 data-user-id 只能通过 getAttribute("data-user-id") 读），所以跨浏览器项目建议封装一个安全读取函数。
- 安全读取：用
e.target.closest("[data-user-id]").dataset.userId定位最近的带该属性的祖先 - 兜底方案：写个工具函数
getData(el, key)，内部先查dataset[key]，失败再 fallback 到getAttribute("data-" + key) - 不要依赖
e.currentTarget.dataset除非你确定事件绑定在目标元素本身
实际业务中，最易被忽略的是字符串类型隐式转换和事件委托中的目标不确定性——这两个点一旦出错，调试时往往要花大量时间确认是不是“明明写了 data 属性却读不到”。
