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 = "<span>带标签</span>"：能渲染 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），因为只能绑定一个：
立即学习“Java免费学习笔记（深入）”；
-
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，避免频繁回流
基本上就这些。掌握这四类 API，覆盖日常 90% 的 DOM 操作需求。不需要死记所有方法，理解“查-改-听-动”这个逻辑链，再结合具体场景选对工具就行。
