JavaScript 中操作 DOM 节点（增删改）有哪些常用方法？
- 前端
- 2025-07-28
- 43热度
- 0评论
JavaScript DOM节点操作：增删改查核心方法详解
在现代Web开发中，JavaScript的DOM操作是实现动态网页交互的核心技术。通过增删改查网页元素，开发者可以实时更新页面内容、响应用户操作并构建复杂的前端应用。React等框架虽然通过虚拟DOM优化了更新性能，但其底层仍基于传统DOM操作原理。本文将系统讲解原生JavaScript中操作DOM节点的常用方法。
一、DOM节点基础概念
文档对象模型（DOM）将HTML文档解析为树状结构，每个HTML标签、属性、文本都是树上的节点。浏览器提供约50种DOM操作方法，其中80%的日常开发聚焦在节点的增删改操作。
1.1 节点类型说明
- 元素节点：HTML标签（如<div>）
- 文本节点：标签内的文字内容
- 属性节点：标签属性（如class/id）
二、节点操作核心方法
2.1 创建节点
createElement()：创建新元素节点
const newDiv = document.createElement('div');
createTextNode()：创建文本节点
const textNode = document.createTextNode('新内容');
2.2 插入节点
| 方法 | 作用 | 示例 |
|---|---|---|
| appendChild() | 在父节点末尾添加 | parent.appendChild(newDiv); |
| insertBefore() | 在指定节点前插入 | parent.insertBefore(newDiv, existingChild); |
2.3 删除节点
removeChild()：删除指定子节点
parent.removeChild(childToRemove);
remove()（ES6+）：节点自删除
childToRemove.remove();
2.4 修改节点
- innerHTML：替换元素HTML内容
- textContent：设置纯文本内容
- setAttribute()：修改元素属性
element.setAttribute('class', 'new-style');
三、高性能操作技巧
3.1 文档碎片优化
批量操作时使用DocumentFragment减少重排：
const fragment = document.createDocumentFragment();
items.forEach(item => {
fragment.appendChild(createItemElement(item));
});
listContainer.appendChild(fragment);
3.2 现代框架对比
React通过虚拟DOM实现智能更新：
- 新增节点：旧虚拟DOM不存在时创建真实节点
- 删除节点：新虚拟DOM不存在时移除真实节点
- 修改节点：比对属性差异局部更新
四、实际应用案例
4.1 动态列表管理
// 创建新列表项
const newItem = document.createElement('li');
newItem.textContent = '新项目';
// 插入到第三位
const list = document.getElementById('myList');
list.insertBefore(newItem, list.children[2]);
// 删除最后一项
list.lastElementChild.remove();
// 修改第二项样式
list.children[1].setAttribute('class', 'highlight');
五、注意事项
- 避免频繁操作DOM引发重排（Reflow）
- 事件监听器要及时解绑防止内存泄漏
- 使用querySelector系列方法精准定位节点
通过掌握这些核心DOM操作方法，开发者可以：
- 实现基础的页面交互功能
- 理解前端框架的底层原理
- 进行必要的性能优化
随着Web Components等新技术的发展，DOM操作仍然是前端工程师必须掌握的底层技能。建议开发者在熟悉原生API的基础上，再学习jQuery或现代框架的封装方法，形成完整的DOM操作知识体系。