如何在JavaScript中操作DOM元素_JavaScript有哪些高效的DOM操作方法

优先用 document.getElementById（最快），其次 querySelector；避免实时集合；textContent 更安全高效；classList/dataset 专用于类和数据属性操作；append 等 API 比 innerHTML += 更优。

直接用 document.querySelector 或 document.getElementById 获取元素，再用 textContent、classList、dataset 等原生属性操作，比反复调用 innerHTML 或 jQuery 更快、更安全。现代 DOM 操作的核心不是“怎么写得炫”，而是“怎么避免重排重绘 + 减少查询次数”。

如何快速安全地获取 DOM 元素

优先用 document.getElementById（最快），其次 document.querySelector（支持 CSS 选择器，但有开销）。避免无节制用 document.querySelectorAll 或 getElementsByClassName —— 它们返回的是实时集合（live collection），每次访问长度或遍历时都可能触发重新查询。

• 如果只查一次且需兼容老浏览器，用 getElementById；
• 需要按类名/属性筛选时，用 querySelector 而非 getElementsByClassName（前者返回静态节点，后者是动态的）；
• 批量操作前，先缓存结果：把 const items = document.querySelectorAll('.item') 存成常量，别在循环里反复调用；
• querySelector 不支持伪类（如 :hover），也查不到未挂载到文档的元素（比如刚 createElement 但没 append 的节点）。

修改内容时该用 innerHTML 还是 textContent

textContent 只处理纯文本，不解析 HTML，速度快且防 XSS；innerHTML 会触发 HTML 解析、DOM 重建，开销大，还可能引入安全风险。除非你明确需要插入带标签的内容，否则一律用 textContent。

• 设文字：el.textContent = 'Hello'；
• 插 HTML：el.innerHTML = 'Bold'（注意转义用户输入）；
• 追加文本不要拼接 innerHTML += —— 这会重复解析整个内容，改用 insertAdjacentText('beforeend', '...')；
• innerText 受 CSS 影响（比如 display: none 的文本不计入），行为不稳定，生产环境慎用。

高效切换类名和数据属性

classList 是专为类操作设计的 API，比手动操作 className 字符串强得多；dataset 则统一管理 data- 属性，自动处理驼峰转换。

• 增删类：el.classList.add('active')、el.classList.toggle('hidden')、el.classList.contains('error')；
• 批量操作类：el.classList.add('a', 'b', 'c')，不用写循环；
• 读写 data 属性：el.dataset.userId 对应 data-user-id="123"，赋值自动转连字符；
• 避免用 setAttribute('class', ...) 或 getAttribute('data-foo') —— 它们绕过优化路径，且不处理类名去重或 dataset 映射。

为什么 append / prepend 比 innerHTML += 更好

innerHTML += 实质是“读取旧 HTML → 拼字符串 → 全量重写 DOM”，会销毁子节点事件监听器、重置表单状态、触发多次 layout。而 append()、prepend()、before()、after() 是原子级 DOM 插入，不破坏现有结构。

• 添加新元素：parent.append(newEl)，不是 parent.innerHTML += newEl.outerHTML；
• 插入 HTML 字符串：el.insertAdjacentHTML('beforeend', '...')，它比 innerHTML += 少一次读取；
• 批量插入多个节点时，先用 DocumentFragment 收集，再一次性 append，避免多次重排；
• 删除节点用 el.remove()，别用 el.parentNode.removeChild(el) —— 前者更简洁，且对 display: contents 等场景更健壮。

最常被忽略的一点：DOM 操作本身不慢，慢的是操作后浏览器被迫同步计算样式和布局。所以关键不是“选哪个方法”，而是“能不能合并操作”——比如把 5 次 class 切换合成 1 次 classList.toggle，把 3 次文本更新攒成 1 次 textContent 赋值。真实性能瓶颈往往藏在「看不见的重排」里，而不是函数名长短。