getAttribute读不到自定义属性是因为属性名拼写不严格匹配，如HTML中写data-user-id="123"，必须用getAttribute("data-user-id")，驼峰或大小写错误均返回null；且仅data-开头的属性合法，非布尔属性返回字符串，不存在时返回null。
getAttribute 读不到自定义属性？检查是否用了驼峰命名
HTML 属性名是大小写不敏感的，但 getAttribute 严格按你传入的字符串去匹配。比如你在标签里写了 data-user-id="123"，那必须用 getAttribute("data-user-id")，不能写成 getAttribute("dataUserId") 或 getAttribute("datauserid")——后者返回 null。
常见错误场景：把 Vue/React 的驼峰习惯带进原生 DOM 操作；或者复制了 CSS 类名（如 user-name）却误以为 HTML 属性也支持连字符转驼峰。
- 自定义属性必须以
data-开头才合法，否则虽能设上，但可能被浏览器忽略或无法通过getAttribute稳定读取 -
getAttribute返回的是字符串，哪怕你写的是data-count="0"，结果也是"0"，不是数字 - 如果属性不存在，它返回
null，不是空字符串，做条件判断时注意用== null或??处理
getAttribute 和点号访问（.id、.className）有什么区别？
点号访问的是 DOM 元素的「反射属性」（reflected property），而 getAttribute 读的是 HTML 标签里实际写的字符串值。两者在多数情况下表现一致，但在几个关键地方会分道扬镳：
-
input.value返回当前输入框内容（可能已被用户修改），getAttribute("value")返回的是初始 HTML 中写的值 -
checkbox.checked是布尔值，getAttribute("checked")返回""（空字符串）或null，不是true/false -
a.href返回解析后的绝对 URL，getAttribute("href")返回原始相对路径（如"./page.html"）
所以别想当然混用——要读初始声明就用 getAttribute，要读运行时状态就用点号属性。
为什么 getAttribute 有时返回 null？排查这三处
不是代码写错了，而是 DOM 状态或属性本身有问题。最常卡在这三个地方：
- 元素还没加载完成：在
DOMContentLoaded之前调用，或在querySelector后没确认是否找到元素（el是null） - 属性被 JS 动态移除了：比如执行过
el.removeAttribute("data-loaded")，之后再getAttribute就是null - 拼写错误或空格干扰：比如写成
getAttribute(" data-id ")（带前后空格），或大小写错（"Data-Id"），HTML 属性名不区分大小写，但getAttribute区分
建议加一层防御：用 el?.getAttribute("xxx") ?? "default"，避免因 null 导致后续逻辑崩掉。
用 getAttribute 读布尔属性（disabled、required）要注意什么？
布尔属性没有值，只存在与否。HTML 写 和 效果一样，但 getAttribute("disabled") 在前者返回 ""（空字符串），后者也返回 ""，而不是 "disabled"。
- 不要用
=== "disabled"判断，应该用!= null或直接用el.disabled（更推荐） -
hasAttribute("disabled")比getAttribute("disabled") !== null更语义清晰，且不依赖返回值类型 - 如果必须用
getAttribute，记住它对布尔属性只返回""或null，永远不是"true"或"false"
真正容易被忽略的是：很多人以为 getAttribute 能反映当前 UI 状态，其实它只反映 HTML 字符串快照——动态禁用/启用按钮靠的是 JS 改 .disabled 属性，不会自动同步到 getAttribute 的返回值里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
