如何使用JavaScript操作DOM_它如何动态改变网页内容呢
JavaScript操作DOM的核心是三步：找元素（如getElementById、querySelector）、改内容/样式/结构（如textContent、classList、appendChild）、绑定事件响应用户动作（如click、input），需注意DOM加载时机和性能优化。
JavaScript操作DOM，就是通过代码直接读取、修改或添加网页里的元素。它让静态页面变成能响应用户动
作、实时更新内容的动态界面。
获取页面元素是第一步
得先找到要操作的HTML标签，常用方法有：
-
document.getElementById("id")：按id精准找一个元素，比如
document.getElementById("title") -
document.querySelector("选择器")：用CSS选择器找第一个匹配项，如
document.querySelector(".btn")或document.querySelector("header h1") -
document.querySelectorAll("选择器")：找所有匹配项，返回NodeList，适合批量操作，比如
document.querySelectorAll("li")
修改内容和样式很直接
拿到元素后，改文字、属性或样式都不用刷新页面：
- 改显示文字：
elem.textContent = "新标题"（安全，不解析HTML）或elem.innerHTML = "加粗内容"（可插HTML，但注意XSS风险） - 改属性：
elem.src = "new.jpg"、elem.className = "active"、elem.style.color = "red" - 切换类名更推荐：
elem.classList.add("highlight")、elem.classList.toggle("hidden")
添加、删除和移动元素很灵活
不只是改，还能“组装”页面：
- 创建新元素：
const newDiv = document.createElement("div") - 往里面塞内容：
newDiv.textContent = "这是新块"或newDiv.appendChild(img) - 插入到页面：
parent.insertBefore(newDiv, existingElem)、parent.append(newDiv)、parent.prepend(newDiv) - 删掉某个元素：
elem.remove()或parent.removeChild(elem)
响应用户动作让变化“动起来”
DOM操作常配合事件，比如点击、输入、滚动时才触发：
button.addEventListener("click", () => { title.textContent = "被点过了" })input.addEventListener("input", e => { preview.textContent = e.target.value })- 表单提交前验证、加载中显示spinner、异步获取数据后填入列表——这些都靠DOM操作落地
基本上就这些。核心就三步：找元素 → 改内容/结构/样式 → 绑定事件让它活起来。不复杂但容易忽略细节，比如获取元素时确保DOM已加载完（常用 DOMContentLoaded 事件包裹），或批量更新时考虑性能（避免频繁重排）。
