17370845950

优先用 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);

• 现代替代方案：用 innerHTML 批量写入字符串（前提是内容可信），或用 insertAdjacentHTML 定位插入
• 避免在循环中反复读取 offsetHeight、getBoundingClientRect() 等触发重排的属性

真正影响性能的往往不是“怎么选 API”，而是“在什么时机、以什么粒度去触碰 DOM”。批量、延迟、缓存 —— 这三个词比任何单个方法名都重要。