html全局属性与dom操作深度耦合：id重复或大小写错误导致getelementbyid返回错误元素；data-*命名不合规（如含冒号、数字开头）使dataset取不到值；tabindex必须显式设为"0"或"-1"才生效，且需配合role语义；hidden是语义化隐藏，区别于display: none。
HTML全局属性不是“拿来就能用”的装饰品，它们和DOM操作深度耦合——用错一个id，document.getElementById就返回错误元素；写错data-命名，dataset里根本取不到值；漏掉tabindex="0"，键盘用户根本点不到你的
为什么getElementById总返回null或错的元素
这不是JS出问题，是HTML结构或时机不对。常见原因有三个：
- 元素还没加载完就执行JS——没包在
DOMContentLoaded里，也没加defer，document.getElementById("x")查的是空DOM树 - ID重复——Vue/React列表渲染时写
id="item"循环5次，浏览器只认第一个，后续调用全指向它 - ID大小写或拼写不一致——
id="UserName"和getElementById("username")不匹配，HTML ID区分大小写
更稳妥的做法是换用document.querySelector('[id="x"]')或document.querySelector('.js-target')，避开ID唯一性陷阱。
dataset读不到你写的data-值？检查命名规则
HTML里写data-user-id="123"，JS里必须用el.dataset.userId（连字符变驼峰、首字母小写），而不是el.dataset.userid或el.dataset.UserID。
如果属性名含数字开头，比如data-1st-place="gold"，dataset.1stPlace会语法报错，得改用dataset["1st-place"]。
另外注意：dataset只映射合法的data-属性——data-user:name含冒号，浏览器静默忽略；data-count="0"取出来是字符串"0"，要转数字得手动Number(el.dataset.count)。
tabindex设了却不能聚焦？布尔值不生效
tabindex不是布尔属性。tabindex="true"或tabindex（无值）都无效，浏览器当非法值处理，等同于没设。
要让非表单元素可键盘聚焦，必须显式写tabindex="0"。若想跳过Tab顺序但保留JS聚焦能力（比如弹窗关闭按钮），用tabindex="-1"。
别忘了配套加role语义——div[tabindex="0"]本身没语义，屏幕阅读器不会当作可交互控件，得补上role="button"或role="link"。
用hidden还是style="display: none"？行为完全不同
hidden是HTML原生控制可见性的布尔属性，它让元素不可见、不占布局、不被辅助技术访问，且支持CSS伪类:not([hidden])。
style="display: none"只是CSS视觉隐藏，元素仍存在于DOM中，可能被JS意外读取，也绕过hidden的语义约束（比如aria-hidden不会自动同步）。
关键区别：把hidden加在里的<meta>上，浏览器直接忽略——它只对渲染树中的元素生效；而display: none写在哪都起作用。
真正难的不是记住每个属性怎么写，而是理解它们在DOM生命周期中的实际作用点：id影响查找路径，dataset依赖解析规则，tabindex绑定焦点管理，hidden参与可访问性树构建。漏掉任一环，表面看正常，实则埋下兼容性或无障碍隐患。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
