JavaScript DOM操作核心是获取元素后动态修改内容与结构，常用方法包括getElementById、querySelector、querySelectorAll及父子元素遍历；修改用textContent、innerHTML、outerHTML；增删改用appendChild、insertBefore、removeChild等；属性样式通过setAttribute、className、style、classList和dataset操作。
JavaScript DOM操作的核心是通过脚本获取页面元素，再读取、修改或替换其内容与结构。动态修改网页内容不依赖刷新页面，而是直接操作浏览器内存中的DOM树。
获取目标元素
得先找到要改的元素，常用方法有：
- document.getElementById("id")：按唯一ID获取单个元素，最常用也最快
- document.querySelector("css选择器")：支持类名（.box）、标签（p）、属性（[data-id="1"]）等，返回第一个匹配项
- document.querySelectorAll("div.item")：返回所有匹配的元素 NodeList（类似数组，可遍历）
- element.parentElement / element.children：从已有元素出发，向上找父级或向下找子集，适合局部操作
修改文本和HTML内容
拿到元素后，用这些属性快速更新内容：
- element.textContent = "纯文本"：只改文字，不解析HTML，防XSS更安全
- element.innerHTML = "带标签"：写入并渲染HTML，注意确保内容可信
- element.outerHTML = "...";：替换整个元素（含自身标签），慎用，会丢失事件监听器
例如：document.querySelector("h1").textContent = "新标题";
立即学习“Java免费学习笔记（深入）”；
增删改元素结构
不只是改内容，还能调整DOM树本身：
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
- element.appendChild(newEl)：在末尾加一个新节点
- element.insertBefore(newEl, refEl)：插到某个参考元素前
- element.removeChild(oldEl)：移除指定子元素
- element.replaceChild(newEl, oldEl)：用新元素替换旧元素
- element.cloneNode(true)：复制元素及全部子节点，常用于批量生成
新建元素用 document.createElement("div")，再设属性、加内容、最后挂到页面上。
修改属性和样式
让元素“看起来不同”或“行为不同”：
- element.setAttribute("class", "active") 或 element.className = "active"
- element.style.color = "red"：直接设行内样式（注意驼峰命名，如 backgroundColor）
- element.classList.add("hidden")：推荐操作class，支持 add/remove/toggle/contains
-
element.dataset.id = "123"：快捷设置 data-* 属性（
data-id="123"）
样式优先走CSS类控制，JS只负责开关；直接改 style 适合临时、动态值（比如拖拽时 left/top）。
基本上就这些。DOM操作不复杂但容易忽略细节——比如获取元素时元素还没加载完，记得等 DOMContentLoaded 事件；又比如批量插入多个节点，用 DocumentFragment 可减少重排重绘。练熟几个核心API，就能灵活响应用户动作，做出真正交互式的页面。
