id必须唯一、class可复用是HTML规范强制要求，影响DOM操作、CSS优先级、可访问性和SEO；重复id会导致getElementById返回首个元素、aria属性失效、锚点跳转不可预测等问题。
class 和 id 的核心区别就一条：**id 必须唯一，class 可以复用**。这不是建议，是 HTML 规范强制要求——浏览器不校验，但 DOM API、CSS 优先级、可访问性（如 aria-labelledby）和 SEO 都依赖这个前提。
为什么 document.getElementById() 找不到元素？
最常见的原因是页面中存在多个相同 id。虽然浏览器可能“凑合渲染”，但 document.getElementById("header") 只返回第一个匹配元素，其余被忽略；更糟的是，若该 id 被用于 label 的 for 属性或 aria-owns，交互逻辑会直接失效。
- 检查是否误把
class="header"写成id="header"并在多处复制使用 - 构建工具（如 Vue/React 组件重复挂载）可能导致动态生成重复
id，需用Math.random()或 props 注入唯一值 - 服务端渲染 + 客户端水合时，前后端
id不一致也会触发此问题
用 .my-btn 还是 #my-btn 写 CSS？
CSS 里选哪个，取决于你打算怎么用它。不是“哪个更好”，而是“哪个符合语义”。
- 如果这个按钮是页面里唯一的主操作按钮（如提交表单的「确认」），且结构上它代表一个不可替代的功能区块，用
id="submit-btn"+#submit-btn合理 - 如果它是列表里每个条目都有的「删除」按钮，必须用
class="delete-btn"+.delete-btn——否则样式无法批量生效，JS 事件委托也得绕弯 -
id选择器优先级高于class，滥用会导致样式难以覆盖，调试时容易误判冲突来源
jQuery 里 $("#nav") 和 $(".nav") 行为差异
表面上只是符号不同，实际影响执行路径和容错能力。
-
$("#nav")底层调用原生getElementById，快且稳定，但一旦id="nav"不存在，返回空 jQuery 对象，链式调用不会报错，容易掩盖问题 -
$(".nav")走querySelectorAll，支持复杂选择器，但性能略低；若页面没匹配元素，同样返回空集合，但你更可能意识到“样式或类名写错了” - 注意：
$("[id=nav]")是属性选择器，能匹配重复id，但它违背规范、失去语义、且比$("#nav")慢得多，别这么用
什么时候必须用 id？
不是“想用就用”，而是某些机制硬性依赖 id 的唯一性。
-
label标签的for属性必须指向一个有效id，否则点击 label 不会聚焦对应表单控件 - A11y 场景中，
aria-labelledby、aria-describedby、aria-activedescendant等属性值必须是页面内存在的id字符串 - 锚点跳转（
<a href="#section2">）依赖id="section2"元素的存在，重复id会让跳转行为不可预测 - Web Components 的
slot分发或 Shadow DOM 中的getElementById查找，也严格依赖唯一性
id 的唯一性检查只发生在开发者脑内**。浏览器不报错，工具链（除部分 Linter）也不拦截，直到某天表单焦点失灵、屏幕阅读器读错内容、或者 A/B 测试脚本因选错元素导致数据偏差——那时再回溯，往往已错过上下文。 
