id 属性的核心作用是为 HTML 元素提供全局唯一标识符，被 JavaScript、CSS、无障碍技术及 URL 锚点依赖；重复或命名不规范会导致 getElementById 返回错误元素、CSS 选择器失效、屏幕阅读器混乱等问题。
id 属性的核心作用是为 HTML 元素提供**全局唯一标识符**，它不是为了“好看”或“凑数”，而是被 JavaScript、CSS、无障碍技术甚至 URL 锚点真实依赖的底层定位机制。一旦重复或命名随意，document.getElementById 可能返回错误元素，#my-id 选择器可能失效，屏幕阅读器也会混乱。
为什么 id 必须全局唯一
浏览器不校验 id 是否重复，但所有基于 id 的标准行为都默认“只存在一个”。例如：
-
document.getElementById('header')永远只返回第一个匹配元素，哪怕页面中有 5 个id="header" - CSS 中
#nav { color: red; }会同时作用于所有重复id="nav"的元素（这是 CSS 规范允许的“意外效果”，但违背语义） - 使用
<a href="https://www.php.cn/link/aa1ec9091310e2f702004015db05a86b">跳转</a>时，若多个元素有id="section2"，浏览器通常只滚动到第一个
id 命名的硬性限制和常见错误
id 值不是随便写字符串，必须符合 HTML 规范：以字母开头，后续可含字母、数字、连字符 -、下划线 _、冒号 :、点 . —— 但冒号和点在 CSS 选择器中需转义，实际应避免。
- ❌ 错误：
id="1st-item"（开头是数字）、id="user name"（含空格）、id="item#2"（含#） - ✅ 推荐：
id="main-header"、id="userProfileModal"、id="sidebar-nav" - ⚠️ 注意：
id="my:id"在 JS 中可用，但在 CSS 中得写成#my\:id，极易出错，别这么干
什么时候该用 id，什么时候不该用
id 不是“高级版 class”，它的语义是“这个元素在整个页面里就是它自己，没有第二个”。
立即学习“前端免费学习笔记（深入）”；
- ✅ 该用：
id="skip-to-content"（辅助导航锚点）、id="form-verification"（单页唯一表单）、id="modal-confirmation"（当前仅存在一个模态框） - ❌ 不该用：
id="button-primary"（按钮类型可复用，该用class）、id="card-item"（列表中每个卡片都加相同id是典型错误） - ? 替代思路：动态生成唯一
id（如id="card-123"）可用于 JS 精准控制某一项，但前提是后端/前端确保不重复
用 JavaScript 安全操作 id 元素的注意事项
直接靠 id 获取元素快且直观，但得防一手“元素还没加载完”或“id 写错了”。
- 总是检查返回值：
const el = document.getElementById('submit-btn'); if (!el) console.warn('找不到 #submit-btn'); - 不要在 DOM 加载前调用：
getElementById在<script></script>放在<head>且没加defer时大概率返回null - 动态插入内容后，若新增了
id，无需重新绑定事件——但要用事件委托（如监听父容器），而不是反复调用getElementById
真正难的不是写对 id，而是判断“这个东西到底是不是页面里唯一的那个角色”。很多 bug 来自把本该用 class 或数据属性 data- 标识的批量元素，强行塞进 id 里——这时候问题不在语法，而在建模。
