JavaScript操作DOM需先获取元素，再通过属性、方法或事件动态修改内容、结构、样式与属性，并监听用户交互实现响应式更新。
JavaScript 操作 DOM 元素的核心是先获取元素，再通过属性、方法或事件对其进行读取、修改或交互。动态修改页面内容不依赖刷新，而是直接更新浏览器内存中的 DOM 树，用户立刻可见。
获取目标元素（最常用方式）
用选择器定位元素是所有操作的前提：
- document.getElementById("id") —— 通过唯一 id 获取单个元素（最快最常用）
-
document.querySelector("CSS选择器") —— 返回第一个匹配的元素（支持 class、标签、属性等，如
.btn、input[type="text"]） - document.querySelectorAll("CSS选择器") —— 返回 NodeList（类数组），适合批量操作多个元素
- document.getElementsByTagName("div") 或 getElementsByClassName("active") —— 返回 HTMLCollection，注意它是实时集合（后续 DOM 变化会反映其中）
修改元素内容与结构
改变文本、HTML 或子节点是最常见的动态更新场景：
- element.textContent = "新文本" —— 安全设置纯文本（自动转义 HTML，防 XSS）
- element.innerHTML = "加粗内容" —— 插入含标签的 HTML（注意确保内容可信）
- element.append(childElement) 或 element.appendChild(child) —— 添加子节点（可传元素、文本或 DocumentFragment）
-
element.remove() —— 移除自身（现代写法，比
parentNode.removeChild(element)简洁） - element.replaceWith(newElement) —— 替换整个元素（包括它自己）
控制样式与属性
让页面响应用户行为或状态变化：
立即学习“Java免费学习笔记（深入）”；
-
element.style.color = "red" —— 修改行内样式（驼峰命名，如
backgroundColor） - element.classList.add("active") / .remove("hidden") / .toggle("disabled") —— 安全操作 CSS 类（推荐，避免字符串拼接）
-
element.setAttribute("data-id", "123") —— 设置自定义属性（
data-*常用于存储信息） -
element.dataset.id = "123" —— 更便捷地读写
data-*属性（data-user-name→dataset.userName）
监听并响应用户动作
让修改“动起来”，真正实现交互：
- button.addEventListener("click", () => { /* 修改其他元素 */ }) —— 推荐方式，可绑定多个监听器
- 常见事件：
"input"（输入框实时响应）、"submit"（表单提交前拦截）、"change"（select 或 checkbox 改变后）、"keydown"（按键按下） - 在事件回调中，用
this或事件对象e.target获取触发元素，再调用上面的内容/样式方法完成动态更新
不复杂但容易忽略：每次操作前确认元素是否存在（if (el) { ... }），避免报错；大量 DOM 更新时考虑使用 DocumentFragment 批量插入，提升性能；优先用 classList 控制样式，而非直接改 style，利于 CSS 维护。
