JavaScript通过DOM操作实现网页动态交互，核心包括：①获取元素（getElementById、querySelector等）；②修改内容与属性（innerHTML、setAttribute、classList等）；③创建添加元素（createElement、appendChild）；④删除替换元素（remove、replaceChild），掌握这些可灵活控制页面结构与行为。
JavaScript 操作 DOM 是前端开发的核心技能之一。通过 JavaScript，我们可以动态地获取、修改、添加或删除页面中的元素，实现丰富的交互效果。下面详细介绍常用的 DOM 操作方法。
一、获取 DOM 元素的方法
在操作元素之前，必须先获取到对应的 DOM 节点。以下是几种常用的选择器方法：
- document.getElementById("id")：通过元素的 ID 获取单个元素，返回一个对象，若无匹配则返回 null。
- document.getElementsByClassName("class")：通过类名获取元素集合，返回 HTMLCollection（类数组），需注意是实时的。
- document.getElementsByTagName("div")：通过标签名获取元素，也返回 HTMLCollection。
- document.querySelector("selector")：使用 CSS 选择器获取第一个匹配的元素，支持复杂选择器如 ".header nav a"。
- document.querySelectorAll("selector")：返回所有匹配的元素，结果是 NodeList，可用 forEach 遍历。
二、修改 DOM 元素内容与属性
获取元素后，常需要修改其内容、样式或属性。
- element.innerHTML = "新HTML"：设置或获取元素内的 HTML 内容，可包含标签。
- element.textContent = "纯文本"：仅设置文本内容，更安全，避免 XSS 风险。
- element.setAttribute("属性名", "值")：设置自定义或标准属性，如 setAttribute("data-id", "123")。
- element.getAttribute("属性名")：获取指定属性的值。
- element.style.property = "值"：直接修改行内样式，例如 element.style.color = "red"。
- element.classList.add/remove/toggle("类名")：操作类名，toggle 可切换类的有无。
三、创建与添加 DOM 元素
动态生成内容时，需要创建新元素并插入到页面中。
立即学习“Java免费学习笔记（深入）”；
- document.createElement("div")：创建一个指定标签的元素节点。
- parent.appendChild(child)：将子元素添加到父元素的末尾。
- parent.insertBefore(newNode, referenceNode)：在指定参考节点前插入新节点。
- element.append(...nodes)：可在元素末尾添加多个节点或字符串（较新 API）。
示例：创建一个段落并添加到 body
const p = document.createElement("p");
p.textContent = "这是动态添加的段落";
document.body.appendChild(p);
四、删除与替换 DOM 元素
移除不需要的元素可以释放资源或更新界面。
- element.remove()：直接删除该元素本身，现代浏览器支持良好。
- parent.removeChild(child)：通过父元素删除指定子元素，兼容性更好。
- parent.replaceChild(newChild, oldChild)：用新节点替换旧节点。
示例：删除某个特定元素
const el = document.getElementById("toRemove");
el.remove(); // 简洁方式
// 或
// el.parentNode.removeChild(el); // 兼容老浏览器
基本上就这些核心操作。掌握这些方法后，就能灵活控制网页结构和内容，实现动态交互功能。不复杂但容易忽略细节，比如节点类型、引用关系和事件绑定的处理。
