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 同源。它也只认第一个匹配项。
立即学习“前端免费学习笔记（深入）”；
使用场景：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 目录导航链接：
<a href="#faq">常见问题</a> - 单页应用路由 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 才是服务器接收字段名的依据。
典型错误：
-
<input id="email" type="text">→ 后端收不到email字段，因为缺name -
<input id="agree" name="agree" type="checkbox">正确；但若多个 checkbox 共享name="hobby"，就必须用不同value区分，id仍须唯一（如id="hobby-music"） -
<label for="email">邮箱</label><input id="email">中的for属性必须严格匹配id，大小写敏感，空格也不行
复杂点在于：同一个元素可以同时有 id 和 name，但它们承担完全不同的角色——id 是给 JS/CSS/无障碍用的“地址”，name 是给表单提交用的“邮编”。混淆二者，前端看着正常，后端永远收不到值。
