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 解析时，必须手动转换。

• 数值：用 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。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

性能影响：频繁操作多个 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 可能是 标签，它没有 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 属性却读不到”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！