直接用 document.getElementById 配合 innerHTML 更新最快，但仅适用于纯展示区域；需保留事件时改用 textContent 或 appendChild/replaceChild；避免 XSS 风险；querySelector 灵活但需缓存；结构化插入应使用 createElement；批量更新推荐 DocumentFragment。
直接用 document.getElementById 拿元素再改 innerHTML 最快，但别乱用
绝大多数动态更新场景，比如按钮点击后刷新一段文字、加载新列表项，用 document.getElementById 配合 innerHTML 就能立刻生效。它简单、兼容性好（IE6 都支持），但要注意：如果目标元素里已有事件监听器（比如子元素绑了 click），重写 innerHTML 会把那些监听器一并干掉——监听器不会自动重建。
实操建议：
- 只对纯展示区域（如
）用innerHTML，避开有交互逻辑的容器 - 若需保留事件，改用
textContent（仅文本）或appendChild/replaceChild（精确控制节点） - 避免把用户输入或接口返回的 HTML 字符串直接塞进
innerHTML，有 XSS 风险；优先用textContent或手动创建元素
querySelector 和 querySelectorAll 更灵活，但别在循环里反复调用
当你不能靠 ID 定位（比如要改第 3 个 .item，或所有带 data-status="pending" 的按钮），querySelector 和 querySelectorAll 是标准解法。它们支持完整 CSS 选择器语法，比 getElementsByClassName 返回的类数组更易操作。
常见坑：
立即学习“Java免费学习笔记（深入）”；
-
querySelectorAll返回的是静态 NodeList，不是实时集合——后续 DOM 变化不会反映在它里面 - 在频繁触发的回调（如
scroll、input）里反复执行querySelectorAll('.btn')，性能明显下降；应缓存结果或用事件委托 - 选择器太复杂（如
div > ul li:nth-child(2n) .meta[data-id]'）会影响查找速度，简单场景优先用class或id
用 createElement + appendChild 插入结构化内容，比拼接字符串安全
当你要插入带标签的新内容（比如一个带图标和文字的提示条），不要写 el.innerHTML += '✓ 已保存'。字符串拼接难维护，容易漏转义，且无法绑定事件到新节点。
正确做法是用原生 API 构建：
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
const notice = document.createElement('div');
notice.className = 'notice success';
notice.innerHTML = '✓ 已保存';
document.body.appendChild(notice);
更严谨的写法是连文本也用 textContent 设置，避免 XSS：
const icon = document.createElement('span');
icon.className = 'icon';
icon.textContent = '✓';
const text = document.createElement('span');
text.textContent = '已保存';
notice.appendChild(icon);
notice.appendChild(text);
批量更新用 DocumentFragment，避免重复回流
一次性插入几十个列表项？如果每个都调用 appendChild，浏览器会为每次插入触发样式计算和布局（reflow），卡顿明显。用 DocumentFragment 先离屏组装，最后一次性挂载，能显著提升性能。
示例：
const frag = document.createDocumentFragment();
for (let i = 0; i < 50; i++) {
const item = document.createElement('li');
item.textContent = `Item ${i}`;
frag.appendChild(item);
}
document.getElementById('list').appendChild(frag); // 仅一次真实 DOM 操作
注意：DocumentFragment 不是真实 DOM 节点，不能被查询或添加事件监听器；它只是临时容器，append 后即清空。
真正容易被忽略的是：现代框架（React/Vue）默认做了类似优化，但手写 DOM 操作时，这个细节几乎没人检查——直到列表变长、滚动变卡才回头找原因。
