当前位置：首页 > news >正文

JavaScript中的DOM操作

news 2025/10/9 8:06:42

一. 什么是 DOM？

二. 为什么需要 DOM 操作？

三. 基础 DOM 操作

1. 选择元素

2. 修改内容

3. 修改样式

4. 操作属性

四. 进阶 DOM 操作

1. 创建和插入元素

2. 删除和替换元素

3. 事件处理

五. DOM 操作最佳实践

六. 示例：待办事项列表

总结

一. 什么是 DOM？

DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口。它将文档表示为节点和对象的树结构，使开发者可以用 JavaScript 动态地访问和修改文档的内容、结构和样式。

二. 为什么需要 DOM 操作？

（1）动态更新网页内容，无需刷新页面

（2）响应用户交互（点击、输入等）

（3）实现动态样式变化

（4）构建交互式应用程序

三. 基础 DOM 操作

1. 选择元素

// 通过ID选择
const title = document.getElementById('main-title');// 通过类名选择
const items = document.getElementsByClassName('list-item');// 通过标签名选择
const paragraphs = document.getElementsByTagName('p');// 通过CSS选择器选择单个元素
const header = document.querySelector('header .logo');// 通过CSS选择器选择多个元素
const buttons = document.querySelectorAll('.btn');

2. 修改内容

// 修改文本内容
title.textContent = '新标题';// 修改HTML内容
document.querySelector('.content').innerHTML = '<p>新内容</p>';

3. 修改样式

// 修改单个样式
title.style.color = 'red';
title.style.fontSize = '24px';// 添加/移除类
title.classList.add('highlight');
title.classList.remove('highlight');
title.classList.toggle('active');

4. 操作属性

// 获取属性
const link = document.querySelector('a');
console.log(link.getAttribute('href'));// 设置属性
link.setAttribute('href', 'https://example.com');// 移除属性
link.removeAttribute('target');

四. 进阶 DOM 操作

1. 创建和插入元素

// 创建新元素
const newItem = document.createElement('li');
newItem.textContent = '新项目';// 插入元素
const list = document.querySelector('ul');
list.appendChild(newItem);// 在指定位置插入
const firstItem = list.firstElementChild;
list.insertBefore(newItem, firstItem);

2. 删除和替换元素

// 删除元素
list.removeChild(newItem);// 替换元素
const replacement = document.createElement('li');
replacement.textContent = '替换项';
list.replaceChild(replacement, firstItem);

3. 事件处理

// 添加事件监听器
const button = document.querySelector('#submit-btn');
button.addEventListener('click', () => {alert('按钮被点击了！');
});// 移除事件监听器
function handleClick() {console.log('处理点击事件');
}
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

五. DOM 操作最佳实践

（1）减少 DOM 查询 - 多次使用的元素应存储在变量中

（2）批量操作 DOM - 使用文档片段减少重绘

（3）使用 CSS 类代替直接修改样式

（4）使用事件委托处理动态添加的元素

（5）注意内存泄漏 - 移除元素前解绑事件监听器

六. 示例：待办事项列表

// HTML: <input id="taskInput"> <button id="addBtn">添加</button> <ul id="taskList"></ul>const input = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');// 添加任务
addBtn.addEventListener('click', () => {const taskText = input.value.trim();if (taskText) {const li = document.createElement('li');li.textContent = taskText;// 添加删除按钮const deleteBtn = document.createElement('button');deleteBtn.textContent = '删除';deleteBtn.addEventListener('click', () => {li.remove();});li.appendChild(deleteBtn);taskList.appendChild(li);input.value = '';}
});