id属性必须全局唯一，否则getElementById只返回首个匹配元素，锚点跳转错位、屏幕阅读器误读；表单提交依赖name而非id，混淆二者将导致后端收不到数据。
id 属性不是“加个标识而已”，它是浏览器定位、脚本操作、样式控制和可访问性的共同基础——只要重复或命名不合规，document.getElementById 就会静默失效，#section-2 锚点可能跳错位置，屏幕阅读器会读串标签。
为什么 document.getElementById 只返回第一个元素
这是规范行为，不是 bug。HTML 标准明确要求 id 全局唯一，所以 DOM API 的设计前提就是“查一个，得一个”。一旦页面中出现多个 id="nav"，document.getElementById('nav') 永远只返回 HTML 中最先出现的那个节点，其余全部忽略。
常见错误现象：
- 点击按钮想高亮第 3 个卡片，结果第 1 个卡片被操作了
- 表单验证后聚焦失败，因为
document.getElementById('email')拿到的是页眉里的隐藏输入框 - 用
querySelectorAll('[id="item"]')临时绕过，但掩盖了结构问题
锚点跳转（#section-id）为什么会跳偏
浏览器滚动到 id 对应元素时，依赖的是内部的元素查找逻辑，和 getElementById 同源。它也只认第一个匹配项。
使用场景：
- 目录导航链接：
@#@#@#@#@#@#@#@#@#@0 - 单页应用路由 hash 模式下的视图切换
- 文档内快速定位（如 API 文档右侧 TOC）
容易踩的坑：
- 服务端渲染模板循环生成卡片时，硬编码
id="card"—— 必然重复 - 动态插入内容后没重置 id，导致新旧
id冲突 - 用了合法但 CSS 难写的字符，比如
id="user:profile"，在 CSS 中必须写成#user\:profile，极易漏转义
如何安全生成唯一 id（尤其在循环/组件中）
手动拼接容易出错，推荐用可预测、无副作用的方式生成。不要依赖时间戳或随机数——它们不可控、难调试。
实操建议：
- 列表项：用索引 + 前缀，如
id={`item-${index}`}（React）或id="product-123"（服务端已知主键） - 模态框/弹层：加作用域前缀，如
id="modal-delete-user"，避免和页面其他id="modal"冲突 - 避免数字开头：
id="1st-section"在 HTML4 中非法，虽然 HTML5 允许，但部分旧工具链仍报错 - 不用点号和冒号：CSS 中需转义，JS 虽可读，但
document.getElementById('a.b')看着就危险
name 和 id 混用导致表单提交失败
这是高频盲区：id 不参与表单数据提交，name 才是服务器接收字段名的依据。
典型错误：
-
→ 后端收不到email字段，因为缺name -
正确；但若多个 checkbox 共享name="hobby"，就必须用不同value区分，id仍须唯一（如id="hobby-music"） -
中的for属性必须严格匹配id，大小写敏感，空格也不行
复杂点在于：同一个元素可以同时有 id 和 name，但它们承担完全不同的角色——id 是给 JS/CSS/无障碍用的“地址”，name 是给表单提交用的“邮编”。混淆二者，前端看着正常，后端永远收不到值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
