<p>最可靠方式是用 el.hasAttribute('data-xxx') 判断 data-* 属性是否存在，它纯检查存在性、不读值、零开销；getAttribute() !== null 会误判空字符串情况，dataset 查不到不等于不存在。</p>
用 hasAttribute() 判断 data-* 属性是否存在最可靠
直接调用 el.hasAttribute('data-xxx') 是判断某个 data-* 属性是否被显式声明在 HTML 标签中的最快、最轻量方式。它不读取值、不触发重排、不抛错，返回纯布尔值。
常见误判场景：
-
el.getAttribute('data-locked') !== null—— 当属性存在但值为空字符串（data-locked=""）时，getAttribute()返回""，导致!== null为 true，但!!""是 false，逻辑错乱 -
'data-locked' in el.dataset——dataset是只读代理，某些命名不规范的属性（如含数字、大写）根本不会映射进去，查不到不等于不存在
正确做法始终是：el.hasAttribute('data-locked')。注意参数必须是完整、小写的属性名，比如 data-user-id 就不能写成 data-userid 或 dataUserId。
dataset 里查不到，不代表属性不存在
el.dataset.xxx 是浏览器对 data-* 属性做的驼峰转换映射，它只覆盖符合规则的命名：全小写 + 连字符，且不能以数字开头。一旦 HTML 中写了 data-2024-start 或 data-UID，dataset 就静默忽略，访问 el.dataset["2024Start"] 或 el.dataset.uid 都会返回 undefined。
立即学习“前端免费学习笔记（深入）”；
这时候如果只依赖 dataset 判断存在性，就会漏掉真实存在的属性。安全做法是先用 hasAttribute() 确认存在，再用 getAttribute() 取值：
-
el.hasAttribute('data-2024-start')→ true -
el.getAttribute('data-2024-start')→ 实际字符串值（不管是不是空） -
el.dataset["2024Start"]→ 可能是undefined，别靠它做存在性判断
动态插入元素后，hasAttribute() 还管用吗
管用，但前提是 DOM 已更新。如果你用 innerHTML 或 insertAdjacentHTML 插入带 data-* 的标签，浏览器会立即解析并挂载这些属性，之后调用 hasAttribute() 就能正确返回。
容易踩的坑：
- 在插入语句后**立刻**检查，但 JS 执行太快，DOM 尚未完成解析（极少见，但某些复杂模板或微任务边界下可能发生）→ 加个
requestAnimationFrame或Promise.resolve().then(...)延迟一帧再查 - 用
document.createElement('div')创建元素后，手动el.setAttribute('data-id', '123')，这时hasAttribute('data-id')当然返回 true；但如果只改el.dataset.id = '123'，DOM 上其实没新增属性，hasAttribute()仍返回 false
结论：只要属性真正在 HTML 字符串里或通过 setAttribute() 写入了 DOM，hasAttribute() 就可信。
为什么不用 getAttribute() !== null 替代
因为 getAttribute() 在属性存在但值为空字符串时返回 ""，不是 null；而属性根本不存在时才返回 null。所以 el.getAttribute('data-flag') !== null 实际上等价于 “属性存在且值非空字符串”，语义已经偏移。
更隐蔽的问题是性能：每次调用 getAttribute() 都要解析属性值、做字符串拷贝，哪怕你只关心“有没有”。而 hasAttribute() 是纯存在性检查，开销几乎为零。
简单对比：
-
el.hasAttribute('data-pending')→true（无论data-pending、data-pending=""、data-pending="false"） -
el.getAttribute('data-pending') !== null→false（当值为空字符串时） -
el.getAttribute('data-pending') != null→ 更危险，"" != null是 true，但语义混乱，不推荐
真正需要区分“存在”和“存在且非空”时，才分两步：先 hasAttribute()，再 getAttribute() 看值。
