防范同名ID需从设计源头杜绝重复：通用功能用class替代ID；真需唯一时生成带上下文的合规ID；数据存data属性而非隐藏input；动态插入后强制校验或重写ID。
防范动态增加的同名 ID，关键不是“防重复”，而是从设计源头杜绝重复可能。ID 一旦不唯一，getElementById 就注定只认第一个——它不会报错，也不会警告，而是静默失效，排查成本极高。
用 class 替代通用功能 ID
如果多个元素执行相同动作（如“删除”“展开”“编辑”），它们不该共享 ID，而应统一用 class 标识。
- 把
<button id="delete-btn">改成<button class="delete-btn"> - 绑定事件时改用
document.querySelectorAll('.delete-btn')配合循环，或委托到父容器 - 避免在 JS 中写
document.getElementById('delete-btn')—— 这种写法本身就隐含错误前提
真需要唯一标识时，生成带上下文的 ID
当某个元素确实需被单独定位（如模态框、表单项、Select2 下拉容器），ID 必须稳定、可预测、全局唯一。
- 在循环中拼接索引或业务主键：
id="user-card-123"、id="comment-reply-456" - 避免纯数字开头（如
id="123"）或含特殊字符（如空格、点、冒号） - 使用连字符分隔，如
id="order-item-789-status"，比驼峰式更稳妥
用 data 属性承载数据，而非依赖隐藏 input 的 ID
常见错误是为每个列表项塞一个 <input id="hidusr" value="xxx">，结果全重复。这既违反规范，又让 JS 获取逻辑脆弱。
- 把数据直接写进触发元素：
<button data-user-id="123">Ban</button> - JS 中用
event.target.dataset.userId直接读取，无需查 DOM、不依赖 ID - 若需复杂数据，可用
data-json='{"id":123,"role":"admin"}'，再JSON.parse()
动态插入后强制校验或重写 ID
对 clone、模板插入、AJAX 加载的内容，不能默认“ID 没问题”。尤其涉及 Select2、日期控件等依赖 ID 的第三方库时，必须主动干预。
- 新增节点后，扫描
.field-instance类容器，按顺序重写其内部所有id、for、name属性 - 用
<template>存原始结构，每次实例化都从模板克隆+索引重写，不复用带 ID 的现成 DOM - 初始化 Select2 前，确保
id和data-select2-id都已更新且不冲突
