JavaScript通过DOM接口动态更新网页元素，无需刷新页面：先用getElementById、querySelector等获取元素，再用textContent、innerHTML等修改内容，setAttribute或classList操作属性与样式，appendChild等方法增删节点，并结合事件监听与异步请求实现交互。
JavaScript通过DOM（文档对象模型）接口操作网页元素，实现页面的动态更新。核心在于获取元素、修改内容或属性、添加或删除节点，整个过程无需刷新页面。
获取页面元素
操作前必须先定位目标元素。常用方法有：
- document.getElementById("id")：通过唯一ID获取单个元素，最常用且性能好
- document.querySelector("css选择器")：支持类名、标签名、属性选择器等，返回第一个匹配项
- document.querySelectorAll("css选择器")：返回所有匹配的NodeList，可遍历操作
- document.getElementsByClassName("cls") 或 document.getElementsByTagName("div")：返回HTMLCollection，需注意是实时集合
修改元素内容和属性
拿到元素后，可通过多种属性动态更新其显示效果：
- element.textContent：设置纯文本内容，不解析HTML，安全防XSS
- element.innerHTML：设置含HTML结构的内容，功能强但需自行过滤用户输入
-
element.setAttribute("name", "value") 或 element.name = "value"：修改属性，如
img.src、a.href -
element.style.propertyName：直接改内联样式，如
div.style.color = "red" - element.className 或 element.classList.add/remove/toggle()：控制CSS类，推荐用classList操作更安全灵活
添加、删除和替换节点
动态构建或调整页面结构依赖节点操作方法：
立即学习“Java免费学习笔记（深入）”；
- parent.appendChild(child)：在父元素末尾追加子节点
- parent.insertBefore(newNode, referenceNode)：在指定位置前插入
- parent.removeChild(child)：移除指定子节点
- element.replaceChild(newNode, oldNode)：用新节点替换旧节点
- document.createElement("tag") 配合 document.createTextNode("text") 创建新内容再插入
响应用户行为实时更新
结合事件监听让更新“动起来”：
- 用 element.addEventListener("click", handler) 绑定交互，比如点击按钮更新文字
- 表单中监听 "input" 或 "change" 实时反映用户输入
- 配合 setTimeout 或 setInterval 实现定时更新（如倒计时、轮播）
- 异步请求（fetch/AJAX）成功后，用上述方法把新数据渲染到页面上
DOM操作本质是JavaScript与浏览器渲染引擎之间的桥梁。写的时候注意避免频繁读写布局属性（如offsetTop），减少重排重绘；批量更新可用DocumentFragment暂存节点再一次性插入。不复杂但容易忽略细节。
