如何用javascript高效操作DOM元素【教程】

幻影之瞳 2026-01-26 00:00:00 次阅读

优先用 querySelector/querySelectorAll 替代老式 DOM 查找方法，因其语法统一、返回值一致且支持复杂选择器；innerHTML 用于插入含标签结构，textContent 仅更新纯文本更安全高效；批量操作 DOM 应用 DocumentFragment 或 innerHTML 一次性挂载，避免循环触发重排。

直接用 document.querySelector 和 document.querySelectorAll 替代老式 getElementById / getElementsByClassName，绝大多数场景下更简洁、可读性更强，且支持复杂选择器。

为什么 `querySelector` 比 `getElementById` 更值得默认使用

不是因为它“高级”，而是它统一了查找逻辑：ID、类名、属性、伪类都能用同一套语法；而 getElementById 返回单个元素，getElementsByClassName 却返回 HTMLCollection（非数组），容易在调用 .forEach 时出错。

实操建议：

查单个元素优先写 document.querySelector('#my- id')，和 getElementById 性能几乎无差别，但语义更一致
查多个元素统一用 document.querySelectorAll('.item')，返回的是 NodeList，可直接用 .forEach、.map
避免混用：比如用 getElementsByClassName 获取后又转成数组——多此一举

`innerHTML` 和 `textContent` 到底该选哪个

关键看是否要解析 HTML 字符串。innerHTML 会触发 HTML 解析和 DOM 重建，有 XSS 风险且稍慢；textContent 只处理纯文本，安全、快、不触发重排。

常见错误现象：

用 innerHTML 渲染用户输入内容（如评论）→ 被执行恶意脚本
只更新文字却用了 innerHTML → 多余的解析开销，还可能意外清空绑定的事件监听器

使用场景：

动态插入带标签的结构（如模版字符串生成的卡片）→ 用 innerHTML
仅更新文案（如状态提示、计数器）→ 用 textContent

批量操作 DOM 时，为什么别直接循环 `appendChild`

每调用一次 appendChild 都可能触发浏览器重排（reflow），100 次操作 = 100 次潜在重排，性能断崖式下降。

实操建议：

用 DocumentFragment 缓存所有新节点，最后一次性挂载：

const frag = document.createDocumentFragment();
items.forEach(item => {
  const el = document.createElement('div');
  el.textContent = item;
  frag.appendChild(el);
});
container.appendChild(frag);