根本原因是页面存在重复id值，导致getelementbyid只返回首个匹配元素；常见于组件循环渲染、ssr水合及多人协作场景，应改用动态唯一id或data-id属性。
document.getElementById() 为什么总拿不到你要的元素
根本原因几乎总是：页面里有重复的 id 值。浏览器不报错，但 document.getElementById("x") 永远只返回第一个匹配项，后面的全被忽略。
常见触发场景：
- Vue/React 组件循环渲染时写死
id="modal"，结果生成了 5 个同名id - 服务端渲染 + 客户端水合（hydration）后，模板和 JS 初始化逻辑各自注入了相同
id - 多人协作时，没人主动检查
id是否已被他人占用
验证方法很简单：在控制台运行 document.querySelectorAll('[id="xxx"]')，如果返回 NodeList 长度大于 1，就坐实了问题。
修复建议：
- 动态生成唯一值，比如
id="user-card-${userId}"或用Math.random().toString(36).slice(2, 9) - 优先用
data-id存业务标识，id只留给锚点、label[for]、ARIA 关联等真正需要它的场景
class 名里多一个空格，为什么 classList.contains() 失效
class 属性值对空格极其敏感。写成 class="btn primary"（两个空格）会被解析为三个类名：["btn", "", "primary"]，中间那个空字符串是合法的类名，但显然不是你想要的。
后果就是：el.classList.contains("primary") 返回 false，因为实际存在的是 "" 和 "primary"，但中间夹着空串。
安全做法只有两个：
- 永远用
classListAPI 操作：el.classList.add("active")、el.classList.toggle("disabled")，它会自动去重、过滤空格 - 避免直接拼接字符串：
el.className += " active"容易引入多余空格或重复类名，尤其在多次调用后
另外注意：class 值不能含制表符、换行符，否则解析会在第一个非法字符处截断。
data-* 属性取不到值？检查命名转换规则
HTML 中写 data-user-id="123"，JS 里必须用 dataset.userId 访问——连字符转驼峰，且首字母小写。写成 dataset.userid 或 dataset.UserID 都拿不到。
更隐蔽的坑：
- 属性名以数字开头，比如
data-1st-place="gold"，JS 无法通过dataset.1stPlace访问（变量名非法），得用dataset["1st-place"] -
data-后只允许 ASCII 字母、数字、连字符-、下划线_、点.；data-user:name是无效的，浏览器静默忽略 - 所有值都是字符串，
data-count="0"取出来是"0"，要数值得手动转：Number(el.dataset.count)
id 和 class 在 CSS 选择器权重与维护性上的真实代价
#header 的优先级确实高于 .header，但这不是优势，而是债务。一旦用了 id 写样式，后续想覆盖就得用更强的选择器（比如 #header.header--fixed），或者加 !important，很快陷入样式泥潭。
真正可持续的做法是：
- 用
class承担全部样式职责，按 BEM 或类似规范组织：card__title、form-input--error -
id只用于三件事：锚点跳转、label[for]关联、ARIA 属性引用（如aria-labelledby） - 需要 JS 精准操作单个元素时，优先考虑
data-id+querySelector，而不是依赖id—— 这样既避开唯一性风险，又不污染语义
最常被低估的点：重复 id 不会中断页面渲染，但会让无障碍工具、SEO 抓取、自动化测试全部失效，而这些故障往往在线上才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
