应使用 document.querySelectorAll("[id=\"tooltip\"]") 批量删除重复 ID 元素，而非 getElementById；支持属性选择器如 ^= 匹配前缀；注意框架中需避免绕过响应式系统。
用 document.querySelectorAll 定位多个 ID 元素
HTML 中 ID 理论上应唯一，但实际开发中常出现重复 ID（比如模板拼接、多次引入组件），这时想批量删掉所有匹配的元素，不能只用 document.getElementById——它只返回第一个。必须改用 document.querySelectorAll 配合属性选择器。
例如要删掉所有 id="tooltip" 的元素：
document.querySelectorAll('[id="tooltip"]').forEach(el => el.remove());
- 注意写法是
[id="tooltip"]，不是#tooltip（后者只匹配第一个） - 如果 ID 含特殊字符（如点、冒号），需转义或改用双引号包裹属性值，例如
[id="my.widget"]是合法的 -
querySelectorAll返回的是静态 NodeList，可直接遍历，不用担心边删边迭代出错
批量删除含某 ID 前缀的元素（如 id="temp-xxx"）
当 ID 有规律但不完全一致，比如都以 temp- 开头，就不能硬匹配完整值，得用属性选择器的“起始匹配”语法 ^=。
document.querySelectorAll('[id^="temp-"]').forEach(el => el.remove());
-
[id^="temp-"]表示 ID 属性值以temp-开头，比正则更轻量且原生支持 - 避免用
el.id.startsWith('temp-')遍历全部元素再判断——DOM 查询已做过筛选，没必要二次过滤 - 注意大小写敏感，
temp-不会匹配Temp-
删除后触发重排/重绘要注意什么？
连续调用 remove() 多个元素时，浏览器可能逐个触发 layout，影响性能，尤其在循环中操作大量节点时。
- 若元素都在同一父容器下，先用
parentElement.removeChild()批量移除更高效，但前提是能统一获取父级 - 更稳妥的做法是：先收集所有目标元素，再一次性从 DOM 中剥离，例如用
DocumentFragment或先el.parentElement.removeChild(el)循环执行（现代浏览器对连续remove()优化较好，一般不用过度干预） - 如果后续还要操作这些被删元素（比如加回、读取数据），别用
remove()，改用el.style.display = 'none'或临时移到document.body外
服务端渲染或框架场景下 ID 批量删除可能失效
Vue/React 等框架管理的 DOM，直接操作原生元素可能绕过响应式系统，导致状态与视图不一致；SSR 页面中，脚本执行时机也可能早于 hydration 完成。
- 在 Vue 中优先用
v-if或key控制渲染，而非手动删 DOM - React 中同理，不要在
useEffect里用querySelectorAll删元素，应驱动 state 变化 - 若必须操作（比如清理第三方库插入的浮层），确保在
useLayoutEffect（React）或onMounted（Vue）之后执行，并加setTimeout延迟一帧避开 hydration 冲突
ID 不是为批量操作设计的，强行批量删 ID 元素往往说明结构或流程有隐性问题——比如本该用 class 区分的却被塞进了 ID，或者动态插入未清理。真正需要高频批量控制的，该用 class + data-* 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
