id必须全局唯一，重复会导致JavaScript选择器仅返回首个匹配元素；class用于分组复用，可叠加；推荐用id定位具体实例、class控制共性行为，并优先考虑data-属性替代ID以兼顾语义与唯一性。
id 必须全局唯一，重复会导致 JavaScript 选择器失效
HTML 规范强制要求 id 在整个文档中只能出现一次。浏览器不校验，但一旦重复，document.getElementById() 总是返回第一个匹配元素，后续的同名 id 彻底“不可见”。用 querySelector() 也一样——它只取第一个。
- 常见错误：Vue/React 组件循环渲染时硬编码
id="modal"，结果多个弹窗共享同一个id - 调试技巧：在控制台运行
document.querySelectorAll('[id="xxx"]')，若长度 > 1，说明已违反唯一性 - 修复方式：动态拼接唯一值，比如
id="modal-<font color="#0066cc">item.id</font>"或用Math.random().toString(36).slice(2, 9)生成临时 ID
class 本质是标签分组机制，可复用、可叠加、可动态切换
class 不承担唯一标识职责，而是为样式、脚本或语义归类服务。一个元素能有多个 class（空格分隔），同一 class 也能出现在任意多元素上。
- 典型误用：把
class="btn-primary"当成唯一按钮标识，结果 JS 里写document.querySelector('.btn-primary')拿到的是 DOM 中第一个按钮，而非预期的那个 - 推荐组合：用
id定位具体实例（如id="user-form-123"），用class控制共性行为（如class="form-input js-validate"） - 注意兼容性：
class值不能含空格、制表符、换行，否则解析会截断；但连字符（-）、下划线（_）、数字都合法
CSS 选择器性能与语义权重差异明显
#my-id 是最高优先级的单个选择器，浏览器内部用哈希表直接查找，速度极快；而 .my-class 需遍历所有带该 class 的元素，尤其在深层嵌套或大量节点时有感知延迟。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 不要为了“省事”把所有交互元素都塞
class：比如全用class="js-toggle"，后期排查哪个按钮绑了什么事件会非常吃力 - 避免过度依赖 ID 做样式：CSS 中
#header权重远高于.header，容易引发难以覆盖的样式冲突 - 现代实践倾向：用
data-属性替代部分 ID 场景，例如data-modal-id="settings"，既保持语义清晰，又不破坏唯一性约束
服务端渲染或 SSR 场景下 id 冲突更隐蔽
服务端模板（如 EJS、Django 模板）若未对循环项做 id 动态处理，生成的 HTML 可能天然存在重复 id。这类问题在开发环境常被忽略，上线后才在用户侧暴露——比如表单验证焦点跳转总跳到第一个字段。
立即学习“前端免费学习笔记（深入）”；
- 检查方法：右键网页 → “查看页面源代码”，搜索
id=，手动确认是否重复 - 框架注意点：Next.js 的
getStaticProps渲染阶段无法调用Math.random()，需改用传入的索引或 slug 构造稳定唯一 ID - 底线原则：只要元素需要被 JS 精确控制（focus、scrollIntoView、aria-activedescendant），就必须有真正唯一的
id
id 的强依赖——比如 aria-labelledby="title-desc" 指向的 id 若不存在或重复，屏幕阅读器就会静默失败，且没有任何报错提示。 
