17370845950

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 = 'Hello'; // 显示为字面量：Hello
el.innerHTML = 'Hello'; // 显示为加粗的 Hello

增删改节点：避免反复操作 innerHTML，用 createElement + appendChild

直接拼接字符串再赋值给 innerHTML 看似简单，但会销毁原有绑定的事件监听器、表单状态（如 的当前值），且每次赋值都触发完整解析和重绘。

• 新增节点优先用 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 移动已有节点时，会自动从原位置删除——这些隐含行为，比记住方法名重要得多。