掌握DOM操作需先获取元素，再修改内容、属性与样式。使用querySelector等方法选中节点，通过innerHTML或textContent更改内容，利用classList操作类名控制样式，结合createElement、appendChild、removeChild等实现元素增删，推荐通过class切换样式以提升可维护性，注意避免innerHTML带来的安全与性能问题。
JavaScript中的DOM（文档对象模型）操作是前端开发的核心技能之一。通过DOM，我们可以动态地访问和修改HTML页面的内容、结构与样式。下面详细介绍如何使用JS进行常见的DOM操作。
获取DOM元素
在操作页面元素之前，首先要能准确选中它们。JS提供了多种方法来获取DOM节点：
- document.getElementById("id")：通过元素的ID获取单个元素。
- document.getElementsByClassName("class")：返回带有指定类名的所有元素集合（HTMLCollection）。
- document.getElementsByTagName("div")：获取指定标签名的所有元素。
- document.querySelector("selector")：返回匹配CSS选择器的第一个元素。
- document.querySelectorAll("selector")：返回所有匹配选择器的元素列表（NodeList）。
推荐使用 querySelector 和 querySelectorAll，语法灵活，支持复杂选择器。
修改元素内容与属性
获取元素后，可以更改其内容或特性：
- element.innerHTML = "新HTML"：设置或获取元素内部的HTML字符串。
- element.textContent = "纯文本"：更安全地设置文本内容，避免XSS风险。
- element.setAttribute("属性名", "值")：设置自定义或标准属性。
- element.getAttribute("属性名")：读取属性值。
- element.id / element.className：直接操作常见属性。
注意：innerHTML虽然强大，但频繁使用可能影响性能并带来安全问题。
操作元素样式与类名
可以通过JS动态控制元素外观：
- element.style.property = "值"：例如 element.style.color = "red"，适用于行内样式的设置。
- element.classList.add("类名")：添加一个CSS类。
- element.classList.remove("类名")：移除某个类。
- element.classList.toggle("类名")：切换类的存在状态。
- element.classList.contains("类名")：判断是否包含某类。
建议优先通过切换class来控制样式，而不是直接写style，便于维护和复用CSS规则。
创建、插入与删除元素
JS可以动态构建和管理DOM结构：
- document.createElement("div")：创建新元素节点。
- parent.appendChild(child)：将子元素添加到父容器末尾。
- parent.insertBefore(newChild, referenceChild)：在指定子元素前插入新元素。
- element.removeChild(child)：从父级删除指定子元素。
- element.remove()：直接删除该元素本身。
示例：动态添加一个段落
const p = document.createElement("p");
p.textContent = "这是动态添加的内容";
document.body.appendChild(p);
这类操作常用于列表更新、弹窗生成等交互场景。
基本上就这些。掌握以上DOM操作方法，就能实现大多数页面动态效果。关键是理解节点关系和方法的适用场景，合理选择API提升效率与安全性。
