id必须全局唯一，否则会导致JavaScript获取、CSS选择、锚点跳转和无障碍支持失效；document.getElementById()仅返回首个匹配元素，重复id引发的bug隐蔽且难排查。
id 必须全局唯一，否则 JavaScript 获取、CSS 选择、锚点跳转、无障碍支持都会出问题——这不是警告，是浏览器实际行为。
document.getElementById() 只返回第一个匹配元素
哪怕页面里有 5 个 id="save-btn"，document.getElementById('save-btn') 永远只返回 DOM 中第一个。后续按钮的点击事件、状态更新全失效，且控制台不报错，极难排查。
- 动态渲染列表时，别给每个项写死相同
id="item"；改用id="item-123"（123 来自后端 ID 或索引） - 服务端模板（如 PHP、Django）中，确保循环生成的
id值不重复，尤其注意 nonce 字段、隐藏校验字段等常被忽略的位置 - 用
document.querySelectorAll('[id="save-btn"]')能拿到全部，但违背id语义，应优先改结构而非绕开问题
CSS 中 #id 选择器会“意外生效”于所有重复 id
比如 #header { background: blue; } 看似生效了，其实是 CSS 规范允许的副作用：它对所有 id="header" 元素都应用样式。但这不是正确用法，会导致维护混乱和浏览器兼容风险。
- 重复
id时，Chrome 和 Firefox 表现可能一致，但 Safari 某些版本或旧版 Edge 会降级处理或忽略部分样式 - 当用
getComputedStyle(el)检查某个重复id元素时，返回的样式可能来自任意一个同名元素的计算结果，不可预测 - 真正需要复用样式，请用
class；id只用于单点精准控制，比如id="main-content"、id="user-modal"
id 命名必须以字母或下划线开头，且不能含空格或 # / @ / $
像 id="1-header"、id="user name"、id="form#submit" 这类写法，会导致 document.getElementById() 返回 null，CSS 选择器直接失效。
立即学习“前端免费学习笔记（深入）”；
- 合法示例：
id="nav-toggle"、id="sidebarNav"、id="_private-section" - 冒号
:和点.虽然语法允许，但在 CSS 中需转义（如#my\:id），极易写错，生产环境禁止使用 - 长度建议控制在 30 字符内；
id="user-profile-settings-container-wrapper"不仅难读，还增加 JS 查找开销（虽微小，但无必要）
用开发者工具快速验证 id 是否唯一且有效
别靠肉眼检查，浏览器自带工具就能暴露问题。
- 在 Chrome/Firefox 的 Elements 面板中右键任意元素 → “Break on” → “attribute modifications”，再操作 JS 修改
id，可捕获非法赋值 - 控制台运行
[...new Set([...document.querySelectorAll('[id]')].map(el => el.id))].length === document.querySelectorAll('[id]').length，返回true才算真正唯一 - 用 Lighthouse 审计“Accessibility”项，重复
id会被明确标记为“ARIA input field has no valid id reference”类错误
最容易被忽略的是：服务端渲染 + 客户端 hydration 场景下，前后端生成的 id 不一致（比如 SSR 输出 id="modal-1"，CSR 初始化又生成 id="modal-1" 但上下文不同），导致 React/Vue 的 DOM diff 错乱。这种问题不会立刻报错，但事件绑定、焦点管理、动画状态全会偏移。
