JavaScript DOM操作是前端开发中实现页面动态交互的基础能力，通过文档对象模型可以访问和修改页面中的所有元素与内容，让静态页面具备动态响应能力。
一、DOM基础概念
DOM全称文档对象模型，是浏览器将HTML文档解析后生成的对象树结构，每个HTML元素、属性、文本都会对应树中的一个节点。JavaScript通过操作这个对象树，就能实现对页面内容的修改。
1.1 节点类型说明
DOM中常见的节点类型有以下几种：
- 元素节点：对应HTML中的标签，如<div>、<p>等
- 文本节点：元素内的文本内容
- 属性节点：元素的属性，如class、id等
二、常用DOM元素获取方法
操作DOM的第一步是获取目标元素，JavaScript提供了多种获取元素的方法，适配不同的使用场景。
2.1 通过ID获取元素
使用getElementById方法可以获取指定id的元素，返回单个元素对象，如果不存在则返回null。
// 获取id为container的元素
const container = document.getElementById('container');
if (container) {
console.log('获取到元素：', container);
}
2.2 通过类名获取元素
getElementsByClassName方法返回所有指定类名的元素集合，是类数组对象，需要遍历才能操作单个元素。
// 获取所有class为item的元素
const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
console.log('第' + (i + 1) + '个item元素：', items[i]);
}
2.3 通过CSS选择器获取元素
querySelector返回第一个匹配选择器的元素，querySelectorAll返回所有匹配的元素集合，支持所有CSS选择器语法。
// 获取第一个类为card的元素
const firstCard = document.querySelector('.card');
// 获取所有p标签下的a元素
const links = document.querySelectorAll('p > a');
三、元素内容与属性操作
获取到元素后，可以修改元素的内容、属性和样式，实现页面的动态更新。
3.1 修改元素内容
常用的内容修改属性有innerHTML、innerText和textContent：
| 属性 | 作用 |
|---|---|
| innerHTML | 获取或设置元素内的HTML内容，会解析标签 |
| innerText | 获取或设置元素内的文本内容，忽略HTML标签，受CSS样式影响 |
| textContent | 获取或设置元素内的文本内容，忽略HTML标签，不受CSS样式影响 |
const title = document.getElementById('title');
// 设置文本内容
title.textContent = '新的标题内容';
// 设置HTML内容，会解析<em>标签
title.innerHTML = '新的<em>标题</em>内容';
3.2 修改元素属性
可以直接通过元素对象修改标准属性，自定义属性建议使用getAttribute、setAttribute方法操作。
const img = document.querySelector('img');
// 修改标准属性
img.src = 'https://ipipp.com/new-img.png';
img.alt = '新图片';
// 操作自定义属性
img.setAttribute('data-id', '1001');
const dataId = img.getAttribute('data-id');
console.log('自定义属性data-id的值：', dataId);
3.3 修改元素样式
通过style属性可以修改元素的内联样式，多单词的CSS属性需要改为驼峰命名。
const box = document.getElementById('box');
// 修改背景色
box.style.backgroundColor = '#f0f0f0';
// 修改宽度和高度
box.style.width = '200px';
box.style.height = '200px';
四、DOM节点增删改操作
除了修改已有元素，还可以通过公式动态创建、添加、删除和替换节点。
4.1 创建新节点
使用createElement创建元素节点，createTextNode创建文本节点。
// 创建新的div元素
const newDiv = document.createElement('div');
// 创建文本节点
const textNode = document.createTextNode('这是新添加的div元素');
// 将文本节点添加到新div中
newDiv.appendChild(textNode);
// 给新div添加类名
newDiv.className = 'new-item';
4.2 添加节点
appendChild将节点添加到父元素的子节点列表末尾，insertBefore可以将节点插入到指定子节点之前。
const parent = document.getElementById('parent');
const referenceNode = document.getElementById('reference');
// 将新div添加到parent末尾
parent.appendChild(newDiv);
// 将新div插入到referenceNode之前
parent.insertBefore(newDiv, referenceNode);
4.3 删除和替换节点
removeChild删除父元素下的指定子节点，replaceChild用新节点替换旧节点。
// 删除parent下的newDiv节点
parent.removeChild(newDiv);
// 创建替换节点
const replaceDiv = document.createElement('div');
replaceDiv.textContent = '替换后的元素';
// 用replaceDiv替换newDiv
parent.replaceChild(replaceDiv, newDiv);
五、DOM事件绑定
DOM操作最常见的场景就是绑定事件，响应用户的交互操作。
5.1 常用事件类型
- 鼠标事件：click（点击）、mouseover（鼠标移入）、mouseout（鼠标移出）
- 键盘事件：keydown（按键按下）、keyup（按键抬起）
- 表单事件：input（输入变化）、submit（表单提交）
5.2 事件绑定方法
推荐使用addEventListener方法绑定事件，支持绑定多个同类型事件，不会覆盖之前的事件处理函数。
const btn = document.getElementById('submitBtn');
// 绑定点击事件
btn.addEventListener('click', function(event) {
// 阻止默认行为，比如表单提交的默认跳转
event.preventDefault();
console.log('按钮被点击了');
alert('提交成功');
});
// 再绑定一个点击事件，不会覆盖上面的事件
btn.addEventListener('click', function() {
console.log('第二个点击事件处理函数');
});
六、DOM操作注意事项
DOM操作会触发浏览器的重排和重绘，频繁操作会影响页面性能，建议尽量批量修改DOM，或者使用文档片段（DocumentFragment）先缓存修改再一次性插入页面。
另外操作DOM前需要确认元素已经加载完成，如果是内联脚本，建议放在页面元素之后，或者使用DOMContentLoaded事件监听文档加载完成后再执行操作。
// 等待DOM加载完成后执行操作
document.addEventListener('DOMContentLoaded', function() {
const element = document.getElementById('target');
if (element) {
element.textContent = 'DOM加载完成后修改的内容';
}
});
JavaScriptDOM前端开发DOM操作修改时间：2026-07-19 10:27:42