id属性用于为HTML元素设置全局唯一标识符，值须为非空字符串、不含空格、不以数字开头；重复、非法字符或大小写混淆会导致JS获取失败、CSS失效及无障碍问题。
用 id 属性直接设置元素唯一标识
HTML 中给元素添加 ID 就是直接写 id 全局属性，值必须是**非空字符串、不能含空格、不能以数字开头**（如 id="user-1" 合法，id="1user" 在旧版 IE 有兼容问题，建议避免）。
常见错误现象：ID 重复、含空格、用中文或特殊符号（如 id="my id" 或 id="用户列表"），会导致 CSS 选择器失效、document.getElementById() 返回 null、无障碍工具无法准确定位。
-
id值在整个页面中必须唯一；重复时浏览器不会报错，但 JS 和 CSS 行为不可靠 - 大小写敏感：
id="Header"和id="header"是两个不同 ID - 不要用纯数字开头，尤其要兼容 IE8–IE10 时（
id="2024"可能被解析失败） - 可配合
data-*属性存额外信息，id仅用于定位和锚点
id 和 class 混用时的定位优先级
当一个元素同时有 id 和 class，CSS 中 #my-id 的权重远高于 .my-class，JS 中 getElementById() 也只认 id，不关心 class。
使用场景：需要快速单点操作（如滚动到某区块、动态显示/隐藏、表单焦点控制），就用 id；批量样式或逻辑处理，用 class 更灵活。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
id适合做锚点链接目标：<a href="#section2">跳转</a>+<div id="section2"></div> -
id不能用在多个相同组件上（比如 5 个卡片都写id="card"），此时应改用class="card"+ 数据属性（如data-card-id="3"） - Vue/React 等框架中，
id不推荐用于模板内逻辑绑定（易重复），应优先用 ref 或 state 控制
服务端渲染或动态生成时 ID 冲突怎么防
后端模板（如 Django、EJS）或 JS 动态插入元素时，容易因循环渲染导致 id 重复。这不是语法错误，但会让 getElementById() 总是返回第一个匹配项，埋下调试隐患。
性能影响不大，但可访问性和自动化测试会出问题（例如 axe 测试工具会直接报 duplicate-id 错误）。
- 循环中拼接唯一值：
<div id="item-{{id}}">（模板）或`item-${index}-${timestamp}`（JS） - 用
crypto.randomUUID()（现代浏览器）生成安全唯一 ID：id="modal-${crypto.randomUUID()}" - 如果只是临时 JS 操作且无需持久化，考虑用
Symbol()或闭包变量代替 ID 定位 - SSR 框架（如 Next.js）中，若组件被多次引用，
id必须带哈希或上下文前缀，否则 hydration 时可能错位
为什么有时候加了 id 却找不到元素
最常见原因是元素还没加载进 DOM 就执行了 document.getElementById()，或者用了 Shadow DOM / iframe 隔离环境。
- 确保脚本在
<body>底部，或监听DOMContentLoaded事件 - Shadow DOM 内部需用
shadowRoot.getElementById()，不能跨根访问 - iframe 中的元素要用
iframe.contentDocument.getElementById()，且受同源策略限制 - 检查是否被框架（如 Vue 的
v-if）移除了该节点，或被 CSSdisplay: none影响——不影响getElementById()查找，但影响可见性逻辑
ID 是 HTML 最基础的定位机制，但它的“简单”恰恰容易让人忽略上下文约束。真正麻烦的不是怎么写，而是什么时候不该写、写完之后谁会依赖它、以及它在复杂渲染链路里是否还可靠。
