el.hasattribute('data-foo') 是唯一能准确区分“未声明”“声明但为空”“声明且有值”三种状态的方法，需配合 getattribute().trim() === '' 判断空值，因 getattribute 返回 null（未声明）或 ""（声明为空），而 dataset 对空字符串返回 undefined，无法识别“声明为空”语义。
直接用 el.hasAttribute('data-foo') 判断“有没有声明”，再用 el.getAttribute('data-foo') 读值并检查是否为空字符串——这是唯一能区分“没写属性”“写了但值为空”“写了且有值”三种状态的做法。
为什么不能只靠 getAttribute 判断空值
getAttribute 返回 null 表示属性根本不存在；返回 ""（空字符串）表示属性存在但值为空。但很多人写 if (!el.getAttribute('data-id'))，这会把 null 和 "" 都当成“假”，误判为同一类情况。
-
data-id没写 →getAttribute返回null -
data-id=""→getAttribute返回"" -
data-id=" "（纯空格）→getAttribute返回" "，.trim()后才是空
怎么准确判断“声明了但值为空”
必须分两步：先确认属性存在，再检查其值是否为空或仅含空白字符。
- 用
el.hasAttribute('data-status')确认该属性被声明过（哪怕data-status=""或data-status="false"） - 再用
el.getAttribute('data-status').trim() === ''判断是否实质为空 - 注意：不要用
el.dataset.status，它对data-status=""会返回undefined，丢失“声明但为空”的语义
常见错误场景与修复
动态插入 HTML 后忘记同步 dataset，或误信 dataset 能反映空值状态，是高频出错点。
- 用
innerHTML插入<div data-flag=""></div>→dataset.flag是undefined，但hasAttribute('data-flag')是true - 校验逻辑写成
if (el.dataset.mode === '')→ 永远不成立，因为dataset对空字符串不映射 - 正确做法：
if (el.hasAttribute('data-mode') && !el.getAttribute('data-mode').trim())
真正需要区分“未声明”和“声明为空”的地方（比如 SSR 渲染一致性、编辑器锁定标记、灰度开关），绕不开 hasAttribute + getAttribute 组合。只依赖 dataset 或只用一次 getAttribute，都会漏掉关键状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
