掌握DOM操作需先获取元素，常用方法包括getElementById、getElementsByClassName、getElementsByTagName、querySelector和querySelectorAll，推荐优先使用后两者；获取元素后可修改内容与属性，如通过innerHTML或textContent设置内容，setAttribute和getAttribute操作属性，结合id和className或classList管理类名；还可动态设置style样式，使用classList的add、remove、toggle和contains方法控制类名；创建元素用createElement，插入用appendChild或insertBefore，删除用remove或removeChild；例如创建按钮并添加事件监听器后插入页面。这些核心方法覆盖大多数前端交互需求，熟练运用可高效实现动态页面效果。
JavaScript 操作 DOM 是前端开发的基础技能。通过 JS 可以动态获取、修改、添加或删除页面元素，实现交互效果。以下是常用的 DOM 获取和操作方法，实用且高频使用。
获取 DOM 元素的方法
要操作页面元素，第一步是准确获取目标节点。常用方法包括：
- document.getElementById("id")：通过 ID 获取单个元素，返回 HTMLElement 对象，若无匹配则返回 null。
- document.getElementsByClassName("class")：通过类名获取元素集合（HTMLCollection），注意返回的是动态集合。
- document.getElementsByTagName("div")：根据标签名获取所有匹配元素，同样返回 HTMLCollection。
- document.querySelector("selector")：使用 CSS 选择器获取第一个匹配的元素，支持复杂选择如 ".header .nav a"。
- document.querySelectorAll("selector")：返回所有匹配元素的 NodeList（静态集合），可遍历操作。
推荐优先使用 querySelector 和 querySelectorAll，语法灵活，兼容现代浏览器。
修改元素内容和属性
获取元素后，常需要修改其内容或特性：
立即学习“Java免费学习笔记（深入）”；
- element.innerHTML = "新HTML"：设置或获取元素内的 HTML 字符串，可插入标签。
- element.textContent = "纯文本"：设置或获取纯文本内容，更安全，避免 XSS 风险。
- element.setAttribute("attr", "value")：设置属性，如添加 data-id 或修改 src。
- element.getAttribute("attr")：获取指定属性值。
- element.id / element.className：直接读写 id 和 class 属性，也可用 classList 进行更精细控制。
操作元素样式和类名
JS 可以动态控制元素外观：
- element.style.property = "value"：直接设置行内样式，如 element.style.color = "red"。
- element.classList.add("className")：添加类名。
- element.classList.remove("className")：移除类名。
- element.classList.toggle("className")：切换类名（存在则删，否则加）。
- element.classList.contains("className")：判断是否包含某类名，返回布尔值。
使用 classList 比直接操作 className 更清晰安全，尤其适合处理多个类的情况。
创建、插入和删除元素
动态生成内容是常见需求：
- document.createElement("div")：创建新元素节点。
- parent.appendChild(child)：将子元素添加到父元素末尾。
- parent.insertBefore(newNode, referenceNode)：在指定子元素前插入新节点。
- element.remove()：直接删除元素自身。
- child.parentNode.removeChild(child)：老式删除方法，兼容性好。
例如，创建一个按钮并插入到页面：
const btn = document.createElement("button");
btn.textContent = "点击我";
btn.addEventListener("click", () => alert("Hello"));
document.body.appendChild(btn);
基本上就这些核心方法，掌握它们就能应对大多数 DOM 操作场景。不复杂但容易忽略细节，多练习更熟练。
