getAttribute/setAttribute是操作data-*自定义属性最标准的方法，直接读写DOM属性字符串，返回/设置原始字符串值，支持任意合法属性名，删除需用removeAttribute。
在 JavaScript 中，getAttribute 和 setAttribute 是操作 HTML 元素**自定义属性（data-* 属性）**最常用、最标准的方法。它们直接读写 DOM 元素的属性字符串，不涉及 JavaScript 对象属性映射，因此适用于所有合法的自定义属性名（包括带连字符的 data-user-id、data-page-type 等）。
用 getAttribute 读取自定义属性值
它返回属性的原始字符串值；如果属性不存在，返回 null（不是 undefined）。
- 必须传入完整的属性名（如
"data-id"），区分大小写 - 不支持驼峰写法（
dataset.userId才支持驼峰，但getAttribute不行） - 即使值是数字或布尔值，也始终返回字符串
示例：
<div id="box" data-user-id="123" data-active="true" data-count="5"></div>
JavaScript：
const el = document.getElementById('box');
console.log(el.getAttribute('data-user-id')); // "123"
console.log(el.getAttribute('data-active')); // "true"
console.log(el.getAttribute('data-count')); // "5"
console.log(el.getAttribute('data-missing')); // null用 setAttribute 设置或更新自定义属性
它会创建新属性，或覆盖已有属性的值。值会被自动转为字符串。
- 第二个参数会被强制转为字符串：传
42、true、new Date()都变成对应字符串 - 不能用它设置布尔属性的“存在即真”语义（如
disabled），但自定义属性没这个限制 - 对
data-属性完全安全，无副作用
示例：
el.setAttribute('data-user-id', 456); // → "456"
el.setAttribute('data-active', false); // → "false"
el.setAttribute('data-timestamp', Date.now()); // → "1718234567890"和 dataset 的关键区别（别混用）
dataset 是专为 data-* 属性设计的 API，会自动转换命名（data-user-id → userId），但有局限：
-
dataset无法读写含大写字母或下划线的属性（如data-UserID或data_user_id） -
dataset不反映通过setAttribute动态添加的、不符合规范的data-名（比如data-123） -
getAttribute/setAttribute更底层、更通用，适合需要精确控制属性名/值的场景
所以：要兼容任意命名、确保字符串原样读写，优先用 getAttribute/setAttribute。
删除自定义属性用 removeAttribute
没有 removeAttribute 就没法干净移除——setAttribute('data-x', '') 只是设为空字符串，属性依然存在。
- 正确删除：
el.removeAttribute('data-user-id') - 检查是否已删除：
el.hasAttribute('data-user-id')返回false
注意：delete el.dataset.userId 不起作用，dataset 是只读代理，不能用 delete 操作。
