getAttribute返回null的三个高频原因是：元素未挂载、属性名拼写不一致、属性未存在于HTML源码中；data-开头是硬性要求；ID为纯数字时getElementById失效，应改用querySelector；dataset存在命名限制和静默失败问题，此时必须用getAttribute。
getAttribute返回null的三个高频原因
最常见的情况不是代码写错了，而是属性根本没被浏览器识别或元素还没到位。先确认这三点：
- 元素是否已挂载：在
DOMContentLoaded前或querySelector后没判空就调用，el是null，自然getAttribute报错 - 属性名拼写是否完全一致：HTML里写
data-user-id="123"，就必须用getAttribute("data-user-id")；写成"dataUserId"、"user-id"或带空格的" data-user-id "，一律返回null - 属性是否真的存在于HTML源码中：JS动态添加的
setAttribute没问题，但若该属性被后续脚本removeAttribute掉，或服务端渲染时压根没输出，那它就是不存在
data-开头不是可选，是硬性要求
浏览器只保证稳定读取以data-开头的自定义属性。其他命名如myid、grouped-as、activityNote虽能在部分浏览器里用getAttribute读到，但属于非标准行为，IE8以下或严格模式下极易失效。
正确做法是统一改用data-grouped-as、data-activity-note这类命名。这样既符合HTML5规范，也能被dataset安全映射（如果命名合规）。
注意：data-1id、data-API-Key、data_user_id这类含数字开头、大写字母或下划线的，dataset会直接忽略，但getAttribute("data-1id")仍能拿到原始字符串——这是它比dataset更可靠的地方。
立即学习“前端免费学习笔记（深入）”；
getElementById('1')失效时别硬扛
当ID是纯数字（如<div id="1"></div>），document.getElementById('1')在部分环境会返回null，根本原因是1不是合法JavaScript标识符，DOM解析和window绑定都可能出问题。
绕过方案很简单：
- 改ID：用
item-1、id_1等语义化写法，再配合getElementById - 不改ID：改用
document.querySelector("div[id='1']")，CSS选择器对ID值无语法限制，且返回元素对象可直接调用getAttribute
后者适合已有大量数字ID的遗留项目，无需批量改HTML，一行代码就能切过去。
getAttribute vs dataset：什么时候必须用前者
dataset看着方便，但它的驼峰转换规则太死板。遇到这些情况，getAttribute是唯一靠谱的选择：
- 属性名含数字开头：
data-2fa-token→ 只能getAttribute("data-2fa-token")，dataset.2faToken语法错误 - 需要原始字符串值：
data-id="007"用getAttribute得"007"，而dataset.id虽也返回字符串，但开发者容易误以为是数字类型，导致===比较出错 - 服务端注入JSON：
data-initial-state='{"count":10}'，必须getAttribute+JSON.parse，且务必包try/catch，因为dataset.initialState会把{}转成空字符串甚至undefined
真正容易被忽略的点是：dataset不报错，它只是静默跳过非法命名的属性。你看到undefined，可能还以为数据没传过来，其实是命名踩了雷。
