javascript如何操作DOM_有哪些常用方法

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外挂函数库的强大功能，对常用的、强大的包

525

查看详情

立即学习“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”)) {…} })，适合动态生成的子元素

DOM 操作本质是树形结构的读写。避免频繁读写（如循环里反复 innerHTML 赋值），批量更新优先用 DocumentFragment 或字符串拼接再一次性写入。

以上就是