根本原因是id在页面中重复，浏览器只返回第一个匹配元素；常见诱因包括组件循环渲染写死id、SSR与hydrate逻辑不一致、复制HTML未改id；验证用document.querySelectorAll('[id="xxx"]')。
为什么 document.getElementById() 总是返回错的元素
根本原因只有一个：id 值在页面中重复了。浏览器不校验、不报错，但 document.getElementById("x") 永远只返回 DOM 中第一个匹配的元素，其余同名 id 彻底“不可见”。
常见诱因包括：
- Vue/React 组件循环渲染时写死
id="modal"，导致多个实例共享同一id - 服务端渲染（SSR）与客户端 hydrate 阶段生成逻辑不一致，挂载出两个
id="header" - 复制 HTML 片段后忘记改
id，比如从<div id="nav"> 粘贴五份却没重命名 <p>验证方式很简单：打开控制台，运行 <code>document.querySelectorAll('[id="xxx"]')，如果返回长度大于 1，立刻修复。class 和 id 在 DOM 查找性能上真有差别吗
有，而且差别可感知。浏览器对
id是哈希索引，document.getElementById("x")是 O(1) 时间复杂度；而class依赖 CSS 选择器引擎，document.querySelector(".x")或document.getElementsByClassName("x")都需遍历匹配节点。立即学习“前端免费学习笔记（深入）”；
尤其在深层嵌套或大量节点（如渲染上千条列表）时，这种差异会体现在 JS 执行延迟上。不过日常开发中多数人感知不到——除非你正在写一个高频操作 DOM 的编辑器或图表库。
htmlppt.skill下载把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
注意：
class可以叠加多个值，id只能有一个字符串值，且不能含空格或点号（id="user.email"在 JS 中必须写成getElementById("user\.email")才能正确获取）。哪些场景非用 id 不行，class 完全替代不了
只有三类机制强制依赖
id的全局唯一性，class无法替代：-
<label for="email"></label>必须精确匹配某个<input id="email">，大小写敏感，不支持class或data-id - URL 锚点跳转（如
#faq-section）只查找id属性，不会查class、name或自定义属性 - ARIA 引用目标，如
aria-labelledby="title-desc"要求存在对应id="title-desc"的元素，否则屏幕阅读器直接跳过
其他所有用途——样式、JS 选取、状态标记——都应优先用
class或data-*。滥用id写 CSS 还会导致权重失衡（#header权重 100，压倒所有.header规则），后续维护成本陡增。命名和拼写细节最容易被忽略的几个坑
id和class名不是随便写的字符串，浏览器对它们有硬性解析规则：-
id不能以数字开头（id="1item"非法），也不能含冒号或点号（除非你主动转义） -
class推荐用 kebab-case（短横线），比如search-input；下划线（search_input）在旧 IE 和部分 SSR 工具链中有兼容隐患，驼峰（searchInput）易与 JS 变量混淆 -
class名禁止描述样式（如red-text、float-left），应表达语义（error-message、nav-main）；工具类统一加u-前缀（u-hidden）隔离业务逻辑
真正麻烦的不是写错，而是错得静默：重复
id不报错，但label绑定失效、锚点不滚动、hydration 静默失败——这些 bug 往往要等到用户反馈或无障碍检测时才暴露。 -
