大规模dom操作前必须确认元素已挂载，正确做法是绑定到就绪信号；避免逐个设置样式属性，应批量用css类或documentfragment；innerhtml需防xss，优先用textcontent或dompurify净化；监听大量元素点击应采用事件委托。
大规模DOM操作前必须确认元素已挂载
直接在脚本顶部执行 document.querySelectorAll('.item') 极大概率返回空 NodeList，尤其在组件模板异步加载、SSR 渲染或 Shadow DOM 场景下。这不是选择器写错，而是 DOM 树还没生成。
正确做法是把操作逻辑绑定到明确的就绪信号上：
- Vue/React 组件用
mounted或useEffect(() => {}, []) - 纯 HTML + JS 场景用
document.addEventListener('DOMContentLoaded', handler) - 动态插入的容器（如弹窗、Tab 面板），监听其
shown.bs.modal（Bootstrap）或自定义事件（如'panel-opened'）
避免逐个调用 style / className / textContent
对 500+ 元素循环设置 el.style.color = 'red' 或 el.className = 'active' 会触发多次重排（reflow），性能断崖式下跌。浏览器每改一次样式，都可能重新计算布局。
更高效的方式是批量控制：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用 CSS 类统一控制：先定义
.batch-highlight { color: red; }，再用container.classList.add('batch-highlight') - 用
DocumentFragment离线组装新节点，最后一次性appendChild - 对已有元素批量更新属性，优先用
setAttribute替代点号赋值（el.dataset.active = 'true'比el.dataset.active = true更稳定）
innerHTML 批量渲染时必须防范 XSS 和结构错误
innerHTML = htmlString 是最快的批量插入方式，但也是最危险的——用户输入未转义直接拼入，等于给 XSS 开后门；且非法 HTML（如缺失闭合标签）会让整个容器内容清空。
安全底线：
- 纯数据渲染？一律用
textContent或innerText（后者慎用，受 CSSdisplay:none影响） - 必须插 HTML？先走净化：用
DOMPurify.sanitize(html)，或手动白名单过滤（只允许strong、em、a[href]） - 构造复杂结构？改用
template标签 +content.cloneNode(true)，避免字符串拼接
监听大量元素点击时别绑 N 个 addEventListener
给 1000 个 .list-item 各自绑 addEventListener('click', handler)，不仅内存占用高，还容易因闭包持有外部大对象导致泄漏。
正确姿势是事件委托：
- 在父容器（如
#list-container）上监听click，用event.target.matches('.list-item')判断来源 - 避免用
event.target.classList.contains('list-item')—— 如果点击的是子元素（如图标、文字），它不包含该 class - 需要传参？用
data-属性存 ID：<div class="list-item" data-id="123">，然后取 <code>event.target.dataset.id真实场景里，DOM 规模上来后，性能瓶颈往往不在“怎么写”，而在“什么时候写”和“写在哪一层”。比如一个表格滚动加载 10w 行，关键不是优化单行渲染，而是用虚拟滚动跳过非可视区域节点——那已经超出 DOM 操作本身，得靠架构层收敛。
