JavaScript操作DOM详解：增删改查全攻略

本文系统详解了JavaScript操作DOM的四大核心能力——精准获取元素、安全修改内容与属性、动态创建添加节点、以及高效删除替换元素，涵盖从基础方法（如getElementById、innerHTML）到现代推荐方案（如querySelector、classList、remove()）的实用技巧与关键注意事项，帮助前端开发者扎实掌握这一构建动态网页交互的基石技能。

JavaScript 操作 DOM 是前端开发的核心技能之一。通过 JavaScript，我们可以动态地获取、修改、添加或删除页面中的元素，实现丰富的交互效果。下面详细介绍常用的 DOM 操作方法。

一、获取 DOM 元素的方法

在操作元素之前，必须先获取到对应的 DOM 节点。以下是几种常用的选择器方法：

• document.getElementById("id")：通过元素的 ID 获取单个元素，返回一个对象，若无匹配则返回 null。
• document.getElementsByClassName("class")：通过类名获取元素集合，返回 HTMLCollection（类数组），需注意是实时的。
• document.getElementsByTagName("div")：通过标签名获取元素，也返回 HTMLCollection。
• document.querySelector("selector")：使用 CSS 选择器获取第一个匹配的元素，支持复杂选择器如 ".header nav a"。
• document.querySelectorAll("selector")：返回所有匹配的元素，结果是 NodeList，可用 forEach 遍历。

二、修改 DOM 元素内容与属性

获取元素后，常需要修改其内容、样式或属性。

• element.innerHTML = "新HTML"：设置或获取元素内的 HTML 内容，可包含标签。
• element.textContent = "纯文本"：仅设置文本内容，更安全，避免 XSS 风险。
• element.setAttribute("属性名", "值")：设置自定义或标准属性，如 setAttribute("data-id", "123")。
• element.getAttribute("属性名")：获取指定属性的值。
• element.style.property = "值"：直接修改行内样式，例如 element.style.color = "red"。
• element.classList.add/remove/toggle("类名")：操作类名，toggle 可切换类的有无。

三、创建与添加 DOM 元素

动态生成内容时，需要创建新元素并插入到页面中。

• document.createElement("div")：创建一个指定标签的元素节点。
• parent.appendChild(child)：将子元素添加到父元素的末尾。
• parent.insertBefore(newNode, referenceNode)：在指定参考节点前插入新节点。
• element.append(...nodes)：可在元素末尾添加多个节点或字符串（较新 API）。

示例：创建一个段落并添加到 body

const p = document.createElement("p");
p.textContent = "这是动态添加的段落";
document.body.appendChild(p);

四、删除与替换 DOM 元素

移除不需要的元素可以释放资源或更新界面。

• element.remove()：直接删除该元素本身，现代浏览器支持良好。
• parent.removeChild(child)：通过父元素删除指定子元素，兼容性更好。
• parent.replaceChild(newChild, oldChild)：用新节点替换旧节点。

示例：删除某个特定元素

const el = document.getElementById("toRemove");
el.remove(); // 简洁方式
// 或
// el.parentNode.removeChild(el); // 兼容老浏览器

基本上就这些核心操作。掌握这些方法后，就能灵活控制网页结构和内容，实现动态交互功能。不复杂但容易忽略细节，比如节点类型、引用关系和事件绑定的处理。

本篇关于《JavaScript操作DOM详解：增删改查全攻略》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！