element.dataset可高效读写data-*属性，自动连字符转驼峰命名，仅支持字符串值，ie11+可用；非data-属性或需兼容老ie时用getattribute/setattribute。
直接用 element.dataset 就能高效读写 data-* 属性，它把连字符命名自动转为驼峰式，省去手动解析，且原生支持增删改查，性能好、语义清晰。
读取 data 属性：自动转换命名规则
dataset 会把 HTML 中的 data-user-id、data-api-url 自动映射为 userId、apiUrl —— 连字符后首字母大写，其余小写。注意：全小写开头的连字符名（如 data-id）对应 id，但 data-id-1 会变成 id1，不是 id_1。
- HTML：
<div id="btn" data-user-id="123" data-api-url="https://api.example.com"></div> - JS 读取：
const el = document.getElementById('btn'); console.log(el.dataset.userId); // "123"；console.log(el.dataset.apiUrl); // "https://api.example.com" - 读取不存在的属性返回
undefined，不会报错
写入 data 属性：字符串值自动处理
dataset 只接受字符串值。赋值时会自动转成字符串，无需手动 .toString()；但布尔、数字、对象等类型要小心隐式转换结果（比如 null → "null"，undefined → "undefined"）。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 设置：
el.dataset.status = "active"; el.dataset.count = 42;→ 生成data-status="active"和data-count="42" - 删除：
delete el.dataset.userId;或el.dataset.userId = "";（后者保留空属性，前者彻底移除） - 批量写入建议用
Object.assign(el.dataset, { status: "done", version: "2.1" })
注意兼容性与边界情况
dataset 在 IE11+ 和所有现代浏览器中可用，但不支持 IE10 及更早版本。另外：
-
data-前缀是强制的，dataset不识别无前缀的属性（如user-id） - 属性名不能以数字开头（
data-1id合法但el.dataset.1id语法错误，需用el.dataset["1id"]访问） - 含大写字母的原始名（如
data-UserID）仍按连字符规则解析，不会保留大写 —— 推荐统一用小写加连字符
替代方案对比：何时不用 dataset
绝大多数场景优先用 dataset。只有在需要操作非 data- 属性、或必须兼容老 IE 时，才退回到 getAttribute/setAttribute：
-
el.getAttribute('data-user-id')返回原始字符串，不转换命名 -
el.setAttribute('data-time', Date.now())更底层，适合动态生成带特殊字符的值（如含空格、引号），但代码更啰嗦 - 若需监听 data 属性变化，
dataset本身不可观察，得靠MutationObserver监听attributes
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
