动态生成的id需遵循“生成→插入→引用”三步法，确保元素已挂载DOM后才使用；优先直接持有元素引用调用focus()，避免依赖getElementById()；注意id唯一性、生命周期管理和无障碍语义。
动态生成的 id 属性本身不能直接“聚焦管理”，但它是实现聚焦控制（如 focus()、scrollIntoView()、aria-activedescendant 等）的前提。关键不在于“生成 id”，而在于“生成后能否被可靠引用并参与焦点流”。
为什么不能只靠 document.getElementById() 动态取 id？
常见错误是：用 document.createElement() 创建元素、setAttribute('id', 'xxx') 赋值，随后立刻调用 document.getElementById('xxx') —— 但若该元素尚未插入 DOM 树，getElementById() 就会返回 null。
- DOM 查找只作用于已挂载节点，未 append 的元素不在文档中
-
id值必须全局唯一，重复生成易导致冲突（尤其循环创建时） - 服务端渲染（SSR）或 hydration 阶段，客户端 JS 可能早于 DOM 就绪，
getElementById()失效
安全生成并使用动态 id 的三步法
核心原则：生成 → 插入 → 引用，三者顺序不可逆。推荐用变量直接持有新元素引用，而非依赖 id 查找。
- 用
const el = document.createElement('input')创建后，立即el.id = 'field-' + Date.now() + '-' + Math.random().toString(36).substr(2, 5)（防重） - 必须在
el插入父容器后（如parent.appendChild(el)），才可对其调用el.focus()或el.scrollIntoView() - 若需后续通过 id 查找（如事件委托绑定），确保查找时机在插入之后，或改用事件委托到父级（
parent.addEventListener('focusin', handler)）
聚焦管理中 id 的替代方案更可靠
很多场景下，硬依赖 id 是设计冗余。现代聚焦控制优先使用引用或语义化属性：
立即学习“前端免费学习笔记（深入）”；
- 对单个动态元素，直接调用
el.focus()，无需中间查 id - 对一组表单项，用
tabindex控制顺序，配合el.setAttribute('tabindex', '0')即可纳入焦点流 - 使用
aria-labelledby或aria-describedby关联描述文本时，目标元素仍需有id，但此时应由你主动分配并确保唯一，而非依赖随机生成 - 避免用
id做 CSS 选择器（如#dynamic-id），改用 class + data-* 属性，更利于批量管理
真正容易被忽略的是：动态 id 的生命周期管理。插入后没清理、重复插入没校验、同名 id 导致 label[for] 绑定错乱——这些不会报错，但会让焦点跳转失效或屏幕阅读器读错内容。聚焦管理的本质不是“怎么设 id”，而是“如何让焦点行为可预测、可追踪、可测试”。
