JavaScript操作DOM的核心是“选中元素→操作内容/属性/结构”：先用getElementById、querySelector等获取元素，再通过textContent、innerHTML、classList等修改内容与属性，用createElement、appendChild等增删改结构，最后用addEventListener绑定事件。
JavaScript 操作 DOM 的核心，就是通过内置 API 获取、修改、添加或删除页面元素。关键不在于记多少方法，而在于理解“选中元素 → 操作内容/属性/结构”这个流程。
获取元素（选择器是基础）
所有操作的前提是先拿到目标元素对象：
- document.getElementById("id")：按 ID 获取单个元素，最快最常用
- document.querySelector("css-selector")：返回匹配的第一个元素（支持 class、tag、属性等任意 CSS 选择器）
- document.querySelectorAll("css-selector")：返回 NodeList（类数组），包含所有匹配元素
- document.getElementsByClassName("cls") 或 document.getElementsByTagName("div")：返回 HTMLCollection，实时集合（注意不是数组）
修改内容与属性
拿到元素后，常用方式有：
- element.textContent = "纯文本"：只改文字内容，不解析 HTML，安全且高效
- element.innerHTML = "带标签"：可插入 HTML，但需防 XSS，慎用
- element.setAttribute("data-id", "123") 或 element.dataset.id = "123"：设置自定义属性（data-*）
- element.className = "btn active" 或 element.classList.add("disabled")：操作 class 更推荐 classList（支持 add/remove/toggle/contains）
增删改元素结构
动态构建或调整 DOM 树：
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
立即学习“Java免费学习笔记（深入）”；
- document.createElement("li") 创建新元素
- parent.appendChild(child) 末尾追加子节点
- parent.insertBefore(newEl, refEl) 在指定元素前插入
- element.remove() 直接移除自身（现代写法，替代 parentNode.removeChild）
- element.replaceWith(newEl) 替换整个元素（包括自己）
事件绑定与响应
让 DOM 元素具备交互能力：
- element.addEventListener("click", handler)：推荐方式，支持多次绑定、可移除
- element.onclick = function() {...}：简单场景可用，但会覆盖之前赋值
- 事件委托常用：parent.addEventListener("click", e => { if (e.target.matches(".item")) {...} })，适合动态生成的子元素
