JavaScript操作DOM的核心是避免改错位置、时机和类型；常见问题包括节点未加载、ID拼写错误、innerHTML与textContent误用、class操作不当、事件委托缺失及框架/Shadow DOM等边界情况。
JavaScript 操作 DOM 的核心不是“怎么写教程”，而是“怎么避免改错位置、改错时机、改错类型”。绝大多数 DOM 修改失败，问题不在语法，而在节点是否存在、是否已加载、是否被框架接管。
document.getElementById 为什么返回 null
最常见原因：脚本执行时目标元素还没出现在 HTML 中。比如 <script> 放在 <head> 里，而 <div id="app"> 在 <body> 底部。
- 确保脚本放在
</body>前，或使用DOMContentLoaded事件 - 不要依赖
window.onload—— 它等所有资源（图片、CSS）加载完，太晚 - 检查 ID 拼写和大小写：HTML 中
id="MyBox"和 JS 中getElementById("mybox")不匹配
document.addEventListener('DOMContentLoaded', () => {
const el = document.getElementById('header');
if (el) {
el.textContent = '新标题';
} else {
console.warn('找不到 #header');
}
});
innerHTML vs textContent 的关键区别
innerHTML 解析并插入 HTML 字符串，textContent 只插入纯文本。选错会导致 XSS 风险或标签被当作文本显示。
- 想插入用户输入的内容（如表单值），一律用
textContent，防止执行恶意脚本 - 想动态生成结构（如列表项），用
innerHTML，但必须确保内容可信；否则先用document.createElement+appendChild -
textContent会清空子节点并替换为文本，不触发 HTML 解析；innerHTML会销毁原有子节点并重建 DOM 树
修改 class 的三种方式及其适用场景
直接赋值 element.className = 'active' 会覆盖全部已有 class，几乎总是错的。
立即学习“Java免费学习笔记（深入）”；
- 添加/删除单个 class：用
element.classList.add('loading')或.remove('error') - 切换开关类（如展开/收起）：用
element.classList.toggle('open') - 批量操作多个 class：用
element.classList.replace('old', 'new')或.add('a', 'b', 'c') - 判断是否存在某个 class：
element.classList.contains('disabled')，比正则匹配className字符串更可靠
动态添加元素后事件不生效？因为没绑定到新节点
用 addEventListener 绑定在静态父容器上，再通过事件委托处理子元素，而不是给每个新元素单独绑定。
- 错误做法：每次
appendChild后都调btn.addEventListener(...) - 正确做法：绑定在父级（如
document.getElementById('list')），监听click，再用event.target.matches('.delete-btn')判断来源 - 注意：委托目标必须是实际触发事件的元素，不是中间包装层；如果用了
stopPropagation()，委托会失效
document.getElementById('todo-list').addEventListener('click', (e) => {
if (e.target.matches('.remove-item')) {
e.target.closest('li').remove();
}
});
DOM 操作本身很简单，难的是判断「该不该改」「什么时候改」「改完谁还能访问它」。比如 Vue/React 管理的区域，直接改 innerHTML 很可能被下一次渲染覆盖；iframe 里的 DOM 需要先确认同源才能访问；Shadow DOM 节点要用 shadowRoot 才能拿到。这些边界情况，比 getElementById 的拼写更容易出问题。
