DOM操作关键在于理解方法的触发时机、返回值和副作用：querySelectorAll返回静态NodeList，textContent防XSS，innerHTML有安全风险，新增节点优先用createElement+appendChild，事件绑定推荐委托。
DOM 操作不是“学完方法就能用好”，关键在于理解每个方法的触发时机、返回值类型和副作用。比如 getElementById 找不到元素会返回 null，但 querySelector 找不到时也返回 null，而 querySelectorAll 总是返回一个 NodeList（哪怕为空），这点不注意就容易在调用 .forEach 时直接报错。
查元素：别只记 getElementById，优先用 querySelector
现代项目中，querySelector 和 querySelectorAll 更灵活、更接近 CSS 书写习惯，且支持伪类（如 :checked）、属性选择器（如 [data-id="123"]）等。
-
getElementById只能按id查，速度快，但无法链式调用或作用于子范围 -
getElementsByClassName和getElementsByTagName返回的是HTMLCollection（动态集合），每次访问.length都可能重新计算，性能隐患大 -
querySelector返回第一个匹配元素，找不到返回null；querySelectorAll返回静态NodeList，可直接用forEach，无需转数组 - 如果要查子元素，直接在父节点上调用：
parent.querySelector('.item')，比document.querySelectorAll('#parent .item')更精准、更高效
改内容：区分 textContent、innerText 和 innerHTML
三者看似都能改文字，但行为差异极大，误用会导致 XSS 或布局异常。
-
textContent：纯文本，忽略 HTML 标签，不触发重排，适合设置/读取原始内容（如日志、表单值） -
innerText：受 CSS 影响（如display: none的内容不计入），会触发重排，且在不同浏览器中行为不一致，慎用 -
innerHTML：解析并渲染 HTML 字符串，有 XSS 风险——绝不要用它插入用户输入的内容；若必须渲染 HTML，请先用DOMPurify.sanitize()过滤
const el = document.getElementById('box');
el.textContent = '<strong>Hello</strong>'; // 显示为字面量：<strong>Hello</strong>
el.innerHTML = '<strong>Hello</strong>'; // 显示为加粗的 Hello
增删改节点：避免反复操作 innerHTML，用 createElement + appendChild
直接拼接字符串再赋值给 innerHTML 看似简单，但会销毁原有绑定的事件监听器、表单状态（如 <input> 的当前值），且每次赋值都触发完整解析和重绘。
立即学习“Java免费学习笔记（深入）”；
- 新增节点优先用
document.createElement+element.appendChild或insertAdjacentElement - 批量插入多个节点时，用
DocumentFragment减少重排次数： -
removeChild和remove()都能删节点，但后者更简洁：el.remove()直接删自己，不用先找父节点
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment); // 仅一次重排
事件绑定：别在循环里反复用 addEventListener，留意事件委托
给多个同类元素（如一列表格行）绑定相同逻辑时，逐个 addEventListener 是低效且易泄漏的。事件委托才是标准解法。
- 把事件监听器绑定到父容器，利用事件冒泡和
event.target判断真实点击目标 - 确保父容器存在且稳定（不要绑定到
document上做过度委托） - 用
once: true选项可自动移除一次性监听器，避免手动清理 - 动态添加的节点，只要父级监听器存在，无需额外绑定
document.getElementById('todo-list').addEventListener('click', (e) => {
if (e.target.classList.contains('delete-btn')) {
e.target.closest('li').remove();
}
});
DOM 操作真正的复杂点不在 API 数量，而在于对“节点生命周期”“事件流阶段”“重排重绘边界”的感知。比如 offsetHeight 强制触发同步布局，频繁读写它会让动画卡顿；又比如 appendChild 移动已有节点时，会自动从原位置删除——这些隐含行为，比记住方法名重要得多。
