如何用javascript操作DOM_哪些API最常用？

夢幻星辰 2025-12-22 00:00:00 次阅读

JavaScript DOM操作核心是“查-改-听-动”：查（getElementById/querySelector/遍历）、改（textContent/innerHTML/classList）、听（addEventListener/event.target）、动（append/remove/createDocumentFragment），覆盖日常90%需求。

用 JavaScript 操作 DOM，核心是获取元素、修改内容、控制样式、响应事件和动态增删节点。最常用的是原生 Web API，无需框架，现代浏览器支持良好。

获取元素：选对方法，事半功倍

根据查找方式和返回结果选择合适的方法：

document.getElementById("id")：唯一、高效，适合单个有 id 的元素
document.querySelector("css-selector")：灵活，支持类名、属性、伪类等（如 .btn[data-loading]），只返回第一个匹配项
document.querySelectorAll("css-selector")：返回 NodeList（类数组），适合批量操作，可配合 forEach
element.parentElement / element.children / element.nextElementSibling：用于在已有元素基础上“就近找”，避免重复查询

修改内容与属性：区分 text、html 和 attribute

别混淆 innerHTML、textContent 和 setAttribute：

element.textContent = "纯文本"：安全，防 XSS，只改文字不解析 HTML
element.innerHTML = "带标签"：能渲染 HTML，但需确保内容可信
element.setAttribute("data-id", "123")：设自定义属性；element.dataset.id = "123" 更简洁（对应 data-id）
element.className = "active" 或 element.classList.toggle("hidden")：推荐用 classList 操作类名，避免字符串拼接错误

绑定与触发事件：优先用 addEventListener

避免内联事件（onclick=""）和直接赋值（el.onclick = fn），因为只能绑定一个：

el.addEventListener("click", handler)：可多次调用，支持选项（如 { once: true, passive: true }）
使用 event.target 区分触发源：尤其在事件委托中（如给父容器监听，再判断 e.target.matches("button.delete")）
手动触发：el.dispatchEvent(new Event("custom"))，适合解耦或测试

动态添加/删除节点：注意文档片段和 append

减少重排重绘，提升性能：

document.createElement("div") 创建新元素，再用 parent.append(child) 或 parent.appendChild(child) 插入
parent.prepend(...nodes)、el.before(...nodes)、el.after(...nodes)：更直观的位置控制
el.remove() 直接删自身；parent.removeChild(el) 是旧写法，已不推荐
批量插入多个节点时，可用 document.createDocumentFragment() 先离线组装，再一次性 append，避免频繁回流