【前端进阶】DOM操作指南：唐叔带你玩转页面元素操控

06-01 1293阅读

作者：唐叔在学习

专栏：唐叔学前端

发布时间：2025年04月26日

标签：前端开发 JavaScript DOM操作 Web开发

各位前端er们好，我是你们的老朋友唐叔。今天咱们来聊聊前端开发中最基础但最重要的技能——DOM操作。无论是页面动态效果、数据渲染还是用户交互，都离不开DOM操作。掌握好这些基本功，才能在前端这条路上走得更稳更远！

文章目录

一、什么是DOM？
二、DOM常见操作场景

1. 元素查询
2. 元素内容操作
3. 元素属性操作
4. 样式操作
5. 节点操作
6. 事件处理
三、性能优化小贴士

结语

一、什么是DOM？

DOM（Document Object Model）即文档对象模型，它是HTML和XML文档的编程接口。简单来说，DOM把整个页面抽象成一棵树（DOM树），我们可以通过JavaScript来操作这棵树的节点，从而实现动态修改页面内容、结构和样式。

二、DOM常见操作场景

1. 元素查询

场景：获取页面中的元素进行后续操作

// 通过ID获取（返回单个元素）
const header = document.getElementById('header');
// 通过类名获取（返回HTMLCollection）
const items = document.getElementsByClassName('item');
// 通过标签名获取（返回HTMLCollection）
const divs = document.getElementsByTagName('div');
// 新时代选择器（推荐！）
const box = document.querySelector('.container'); // 获取第一个匹配元素
const allButtons = document.querySelectorAll('button'); // 获取所有匹配元素

唐叔提示：现代前端开发优先使用querySelector和querySelectorAll，它们支持CSS选择器语法，更加灵活强大！

2. 元素内容操作

场景：动态修改元素文本或HTML内容

// 获取/设置文本内容（自动编码HTML标签）
const title = document.querySelector('#title');
console.log(title.textContent); // 获取
title.textContent = '新标题alert(1)'; // 安全设置
// 获取/设置HTML内容（解析HTML标签）
const content = document.querySelector('.content');
content.innerHTML = '加粗文本';
// 插入大量HTML时推荐使用模板字符串
const data = { name: '唐叔', age: 18 };
content.innerHTML = `
  
    ${data.name}
    年龄：${data.age}
  
`;

安全警告：直接使用innerHTML插入用户输入内容可能导致XSS攻击！务必做好转义处理。

3. 元素属性操作

场景：读写元素的自定义属性或标准属性

const link = document.querySelector('a');
// 标准属性（直接访问）
console.log(link.href);
link.href = 'https://www.tangshu.com';
// 自定义属性（data-*）
const userDiv = document.querySelector('[data-user-id]');
console.log(userDiv.dataset.userId); // 读取
userDiv.dataset.userStatus = 'active'; // 设置
// 通用属性方法
link.setAttribute('target', '_blank');
const hasClass = link.hasAttribute('class');
link.removeAttribute('title');

4. 样式操作

场景：动态修改元素样式

const box = document.querySelector('.box');
// 直接修改style属性（适用于少量样式）
box.style.color = 'red';
box.style.marginTop = '10px'; // 注意驼峰命名
// 批量修改样式（推荐）
box.style.cssText = `
  color: red;
  background: #f5f5f5;
  padding: 15px;
`;
// 类名操作（最推荐的方式）
box.classList.add('active'); // 添加
box.classList.remove('old'); // 移除
box.classList.toggle('show'); // 切换

唐叔经验：优先使用class操作样式，保持JS与CSS的分离，更易维护！

5. 节点操作

场景：动态创建、添加、删除元素

（图片来源网络，侵删）

// 创建新元素
const newItem = document.createElement('li');
newItem.textContent = '新增项';
// 添加节点
const list = document.querySelector('ul');
list.appendChild(newItem); // 末尾添加
list.insertBefore(newItem, list.firstChild); // 指定位置插入
// 克隆节点
const clonedItem = newItem.cloneNode(true); // 深克隆
// 删除节点
list.removeChild(newItem); // 传统方式
newItem.remove(); // 现代简洁方式

6. 事件处理

场景：实现用户交互功能

const btn = document.querySelector('#submitBtn');
// 传统方式（只能绑定一个处理函数）
btn.onclick = function() {
  console.log('按钮被点击了');
};
// 现代方式（推荐）
btn.addEventListener('click', function(e) {
  e.preventDefault();
  console.log('按钮被点击了', e.target);
});
// 事件委托（处理动态元素）
document.querySelector('.list').addEventListener('click', function(e) {
  if(e.target.matches('.delete-btn')) {
    e.target.parentElement.remove();
  }
});

三、性能优化小贴士

减少DOM操作：DOM操作非常耗性能，尽量批量操作