id必须全局唯一，否则document.getelementbyid()仅返回首个匹配元素，css选择器行为不可靠，屏幕阅读器出错；命名须以字母或下划线开头，禁用空格、#、@等非法字符，避免冒号与点以防css转义问题。
id 必须全局唯一，否则 document.getElementById() 只返回第一个匹配元素，CSS #id 选择器行为不可靠，屏幕阅读器会出错——这不是“建议”，是规范强制要求。
id 命名必须以字母或下划线开头，且不能含空格、#、@等非法字符
浏览器不校验 id 合法性，但非法命名会导致 JS 或 CSS 失效。比如 id="1header"（数字开头）、id="user name"（含空格）、id="item#2"（含 #）都会让 document.getElementById('1header') 返回 null，而 CSS 中 #1header 根本不被识别。
合法写法示例：
-
id="main-nav"（推荐：连字符分隔，语义清晰） -
id="userProfileModal"（驼峰式，JS 友好） -
id="_temp-loader"（以下划线开头，极少见但合法）
⚠️ 冒号 : 和点 . 虽然语法允许，但在 CSS 里需转义（如 #my\:id），极易出错，实际项目中应避免。
重复 id 时 document.getElementById() 总是返回第一个，不是报错也不是随机
这是最常被误判的点：页面有 3 个 <button id="save"></button>，调用 document.getElementById('save') 永远只拿到 DOM 中最先出现的那个，其余两个完全不可达。它不会抛错，也不会警告，只是静默失效。
常见错误场景：
- 列表渲染时硬编码
id="card-item"（每个卡片都一样） - 模态框复用模板却没重置
id="modal-close" - 后端模板循环插入相同
id="nonce-field"字段
解决思路：动态生成唯一值，如 id="card-{{id}}"、id="modal-close-{{uuid}}"，确保服务端或客户端生成阶段不重复。
CSS 中 #id 选择器对重复 id 的行为不一致且不应依赖
W3C 规范没禁止浏览器对多个同名 id 应用样式，所以某些浏览器可能“看起来正常”——但这纯属巧合。Chrome、Firefox、Safari 对 #duplicate { color: red; } 的实际应用范围并不统一，尤其在结合伪类（如 :hover）或层叠时容易断裂。
更严重的是语义污染：
-
<label for="email"></label>关联不到正确的<input id="email">（如果页面有多个） -
aria-labelledby="title"指向首个id="title"，而非预期目标 - Lighthouse 等审计工具直接标为可访问性错误
别赌浏览器“凑合能用”，只要 id 不唯一，就等于放弃了可维护性和无障碍支持。
脚本执行时机不对也会让 document.getElementById() 返回 null
即使 id 合法、唯一、拼写正确，document.getElementById('submit-btn') 仍可能返回 null——因为 DOM 还没加载完。
典型触发条件：
-
<script></script>放在里且没加defer或async - 在
DOMContentLoaded事件前执行获取逻辑 - 元素由 JS 动态插入，但获取代码写在插入之前
安全做法：
检查返回值：const btn = document.getElementById('submit-btn'); if (!btn) console.warn('找不到 #submit-btn');
或包裹在事件监听中：document.addEventListener('DOMContentLoaded', () => { /* 获取逻辑 */ });
动态插入后新增的 id，无需重新绑定事件——改用事件委托更稳妥，比如监听父容器的 click，再用 event.target.matches('[id^="card-"]') 判断来源。
真正难的不是写对 id，而是保证它在模板、组件、状态更新、服务端渲染所有环节中始终唯一。一旦漏掉一处，问题就会藏在交互深处，等用户点到第 7 个卡片才暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
