JavaScript操作DOM的核心是获取元素后修改、增删内容及绑定事件。常用方法包括：获取元素（getElementById、querySelector等）、修改内容与属性（textContent、innerHTML、setAttribute等）、添加删除元素（createElement、appendChild、remove等）、事件绑定（addEventListener、event.target等）。
JavaScript 操作 DOM 就是通过 JS 代码读取、修改、添加或删除网页中的 HTML 元素和内容。核心在于获取元素，再调用方法进行操作。下面列出最常用、最实用的 DOM 方法，按使用场景分类说明。
获取元素的方法
这是所有 DOM 操作的第一步，必须先拿到目标元素才能操作它。
-
document.getElementById("id")：通过元素的
id获取单个元素（最常用，性能好） -
document.querySelector("css选择器")：返回匹配的第一个元素（支持 class、标签、属性等任意 CSS 选择器，如
.box、div[data-type="list"]） -
document.querySelectorAll("css选择器")：返回所有匹配的元素，结果是
NodeList（可遍历，但不是数组，需用forEach或转成数组） -
document.getElementsByClassName("class") 和 document.getElementsByTagName("div")：返回 HTMLCollection（动态集合，已逐渐被
querySelector替代）
修改元素内容和属性
拿到元素后，常需要改文字、HTML 结构或属性值。
- element.textContent = "文本"：只改纯文本内容，不解析 HTML（安全，防 XSS）
- element.innerHTML = "带标签的内容"：可插入 HTML，但要注意内容可信，否则有安全风险
- element.setAttribute("data-id", "123")：设置自定义或标准属性
-
element.getAttribute("href")：获取属性值（如链接地址、
data-属性） -
element.className = "new-class" 或 element.classList.add("active")：操作 class 更推荐用
classList，支持增删切换：add()、remove()、toggle()、contains()
添加、删除、替换元素
动态构建页面结构离不开这些方法。
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
立即学习“Java免费学习笔记（深入）”；
- document.createElement("div")：创建新元素节点
- parent.appendChild(child)：把子元素加到父元素末尾
- parent.insertBefore(newEl, referenceEl)：在指定元素前插入新元素
- parent.removeChild(child)：从父元素中移除某个子元素
- oldEl.replaceWith(newEl)：直接替换一个元素（简洁，现代写法）
-
element.remove()：直接删掉自己（比
removeChild更直观）
事件绑定与简单交互
DOM 操作常配合事件实现响应式行为。
-
element.addEventListener("click", handler)：推荐方式，支持多个监听器，可选参数如
{ once: true } - element.onclick = function() { ... }：老写法，只能绑定一个，不推荐
- event.target：在事件处理函数里获取真正被点击的元素（尤其适合事件委托）
- 结合
querySelectorAll+forEach批量绑定事件很常见，比如给所有按钮加点击逻辑
基本上就这些。熟练掌握这四类方法，90% 的日常 DOM 操作都能应对。不需要死记所有 API，重点理解“获取→修改/增删→交互”这个流程，多写几遍就自然记住了。
