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

唐叔在学习

于 2025-04-26 21:44:47 发布

阅读量895

点赞数 30

分类专栏：唐叔学前端文章标签：前端前端开发 JavaScript DOM操作 Web开发

本文链接：https://blog.csdn.net/Tang_is_learning/article/details/147543222

版权

唐叔学前端专栏收录该内容

12 篇文章

订阅专栏

作者：唐叔在学习
专栏：唐叔学前端
发布时间：2025年04月26日
标签：前端开发 JavaScript DOM操作 Web开发

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

一、什么是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 = '新标题<script>alert(1)</script>'; // 安全设置

// 获取/设置HTML内容（解析HTML标签）
const content = document.querySelector('.content');
content.innerHTML = '<strong>加粗文本</strong>';

// 插入大量HTML时推荐使用模板字符串
const data = { name: '唐叔', age: 18 };
content.innerHTML = `
  <div class="user-card">
    <h3>${data.name}</h3>
    <p>年龄：${data.age}</p>
  </div>
`;

安全警告：直接使用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操作非常耗性能，尽量批量操作

// 不好：多次重绘
for(let i=0; i<100; i++) {
  list.appendChild(createItem(i));
}

// 好：使用文档片段
const fragment = document.createDocumentFragment();
for(let i=0; i<100; i++) {
  fragment.appendChild(createItem(i));
}
list.appendChild(fragment);

缓存DOM查询结果：避免重复查询

// 不好：每次都查询
function update() {
  document.querySelector('.box').style.color = 'red';
}

// 好：缓存引用
const box = document.querySelector('.box');
function update() {
  box.style.color = 'red';
}