简体中文 繁體中文 English 日本語 Deutsch 한국 사람 بالعربية TÜRKÇE português คนไทย Français

开启辅助访问 切换到宽版

站内搜索

搜索

活动公告

通知：是的！我们正在计划一个大动作！
11-02 12:46
通知：Telegram 推送频道https://t.me/+2tB3a7aKXlw2YjA1 及时接收第一手论坛帖子信息～
10-23 09:32
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，将及时处理！
10-23 09:31
通知：加入QQ社群吧 https://qm.qq.com/q/QZibQd1hiq
10-23 09:28
通知：签到时间调整为每日4:00（东八区）
10-23 09:26
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

HTML DOM Web API使用实战指南从新手到专家全面掌握文档对象模型操作网页元素处理用户事件实现数据交互构建现代化响应式网页应用

威震华夏关云长

3万

主题

317

科技点

3万

积分

大区版主

木柜子打湿

积分
31893

财Doro三倍冰淇淋无人之境【一阶】立华奏小樱（小丑装）⑨的冰沙以外的星空【二阶】
发表于 2025-10-4 17:30:00 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
引言

文档对象模型（DOM）是Web开发的核心技术之一，它允许开发者通过JavaScript与HTML页面进行交互。DOM将HTML文档表示为一个树形结构，使开发者能够动态地访问和更新文档的内容、结构和样式。本指南将带您从DOM的基础概念开始，逐步深入到高级应用，最终能够熟练运用DOM API构建现代化、响应式的网页应用。无论您是刚入门的前端开发者，还是希望提升DOM操作技能的中级开发者，本指南都将为您提供全面而实用的知识。

DOM基础概念

什么是DOM

DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。它将文档表示为一个由节点构成的树形结构，每个节点代表文档中的一个部分（如元素、属性、文本等）。通过DOM，开发者可以使用JavaScript等编程语言来访问和修改文档的任何方面。

DOM树结构

HTML文档被浏览器解析后会生成一个DOM树，这个树由不同类型的节点组成：
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>示例页面</title>
  6. </head>
  7. <body>
  8.     <h1>欢迎</h1>
  9.     <p>这是一个段落。</p>
  10. </body>
  11. </html>
复制代码

上述HTML代码对应的DOM树结构如下：
  2. Document
  3.     └── html
  4.         ├── head
  5.         │   └── title
  6.         │       └── "示例页面"
  7.         └── body
  8.             ├── h1
  9.             │   └── "欢迎"
  10.             └── p
  11.                 └── "这是一个段落。"
复制代码

节点类型

DOM中有多种类型的节点，常见的包括：

1. 元素节点（Element Node）：表示HTML元素，如<div>、<p>等。
2. 文本节点（Text Node）：表示元素中的文本内容。
3. 属性节点（Attribute Node）：表示元素的属性。
4. 文档节点（Document Node）：表示整个文档。
5. 注释节点（Comment Node）：表示HTML注释。

节点关系

DOM树中的节点之间存在以下关系：

• 父节点（Parent）：直接包含当前节点的节点。
• 子节点（Child）：被当前节点直接包含的节点。
• 兄弟节点（Sibling）：具有相同父节点的节点。
• 祖先节点（Ancestor）：包含当前节点的所有节点（包括父节点）。
• 后代节点（Descendant）：被当前节点包含的所有节点（包括子节点）。

选择和操作元素

基本选择方法

DOM提供了多种方法来选择HTML元素，最常用的包括：

通过元素的ID选择单个元素：
  2. // 获取ID为"myElement"的元素
  3. const element = document.getElementById('myElement');
  5. // 修改元素内容
  6. element.textContent = '新内容';
复制代码

通过类名选择多个元素，返回HTMLCollection：
  2. // 获取所有类名为"item"的元素
  3. const items = document.getElementsByClassName('item');
  5. // 遍历并修改每个元素
  6. for (let i = 0; i < items.length; i++) {
  7.     items[i].style.color = 'blue';
  8. }
复制代码

通过标签名选择多个元素，返回HTMLCollection：
  2. // 获取所有段落元素
  3. const paragraphs = document.getElementsByTagName('p');
  5. // 为每个段落添加类
  6. for (let i = 0; i < paragraphs.length; i++) {
  7.     paragraphs[i].classList.add('paragraph-style');
  8. }
复制代码

使用CSS选择器语法选择元素，querySelector()返回第一个匹配的元素，querySelectorAll()返回所有匹配的元素的NodeList：
  2. // 选择第一个类为"container"的div元素
  3. const container = document.querySelector('div.container');
  5. // 选择所有类为"button"的元素
  6. const buttons = document.querySelectorAll('.button');
  8. // 遍历NodeList
  9. buttons.forEach(button => {
  10.     button.addEventListener('click', function() {
  11.         alert('按钮被点击了！');
  12.     });
  13. });
复制代码

元素属性操作

使用getAttribute()和setAttribute()方法操作元素属性：
  2. // 获取元素
  3. const link = document.querySelector('a');
  5. // 获取href属性
  6. const href = link.getAttribute('href');
  7. console.log(href);
  9. // 设置新属性
  10. link.setAttribute('target', '_blank');
  12. // 检查属性是否存在
  13. const hasTarget = link.hasAttribute('target');
  14. console.log(hasTarget); // true
  16. // 移除属性
  17. link.removeAttribute('target');
复制代码

许多HTML属性可以直接通过JavaScript属性访问：
  2. // 获取元素
  3. const input = document.querySelector('input');
  5. // 获取和设置value属性
  6. console.log(input.value);
  7. input.value = '新值';
  9. // 获取和设置disabled属性
  10. console.log(input.disabled);
  11. input.disabled = true;
复制代码

HTML5允许使用自定义数据属性存储数据，通过dataset属性访问：
  2. <div id="user" data-id="123" data-name="张三" data-role="admin"></div>
复制代码
  2. // 获取元素
  3. const user = document.getElementById('user');
  5. // 访问数据属性
  6. console.log(user.dataset.id); // "123"
  7. console.log(user.dataset.name); // "张三"
  8. console.log(user.dataset.role); // "admin"
  10. // 修改数据属性
  11. user.dataset.role = 'superadmin';
  13. // 添加新的数据属性
  14. user.dataset.email = 'zhangsan@example.com';
复制代码

元素内容操作

innerHTML获取或设置元素的HTML内容，textContent获取或设置元素的文本内容：
  2. <div id="content">
  3.     <p>原始段落</p>
  4. </div>
复制代码
  2. // 获取元素
  3. const content = document.getElementById('content');
  5. // 获取HTML内容
  6. console.log(content.innerHTML); // "<p>原始段落</p>"
  8. // 获取文本内容
  9. console.log(content.textContent); // "原始段落"
  11. // 设置HTML内容
  12. content.innerHTML = '<h2>新标题</h2><p>新段落</p>';
  14. // 设置文本内容（会解析HTML标签为文本）
  15. content.textContent = '<h2>新标题</h2>'; // 显示为文本而非HTML
复制代码

使用DOM方法创建新元素并插入到文档中：
  2. // 创建新元素
  3. const newParagraph = document.createElement('p');
  4. newParagraph.textContent = '这是一个新段落';
  6. // 获取父元素
  7. const container = document.getElementById('container');
  9. // 将新元素添加到父元素的末尾
  10. container.appendChild(newParagraph);
  12. // 在特定位置插入元素
  13. const firstChild = container.firstChild;
  14. container.insertBefore(newParagraph, firstChild);
  16. // 替换现有元素
  17. const oldElement = document.getElementById('old-element');
  18. container.replaceChild(newParagraph, oldElement);
  20. // 移除元素
  21. container.removeChild(newParagraph);
复制代码

事件处理

事件类型

Web中常见的事件类型包括：

1. 鼠标事件：click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout
2. 键盘事件：keydown, keyup, keypress
3. 表单事件：submit, change, focus, blur
4. 文档/窗口事件：load, resize, scroll, unload

事件监听

使用addEventListener()方法为元素添加事件监听器：
  2. // 获取按钮元素
  3. const button = document.getElementById('myButton');
  5. // 添加点击事件监听器
  6. button.addEventListener('click', function() {
  7.     alert('按钮被点击了！');
  8. });
  10. // 使用箭头函数
  11. button.addEventListener('click', () => {
  12.     console.log('箭头函数处理点击事件');
  13. });
  15. // 添加多个事件监听器
  16. button.addEventListener('click', function() {
  17.     console.log('第一个点击处理器');
  18. });
  20. button.addEventListener('click', function() {
  21.     console.log('第二个点击处理器');
  22. });
复制代码

移除事件监听器

使用removeEventListener()方法移除事件监听器：
  2. // 定义处理函数
  3. function handleClick() {
  4.     console.log('点击事件处理');
  5. }
  7. // 添加事件监听器
  8. button.addEventListener('click', handleClick);
  10. // 移除事件监听器
  11. button.removeEventListener('click', handleClick);
复制代码

注意：要移除事件监听器，必须使用与添加时相同的函数引用。因此，匿名函数无法被移除。

事件对象

当事件发生时，事件处理函数会接收一个事件对象作为参数，包含关于事件的详细信息：
  2. button.addEventListener('click', function(event) {
  3.     // 阻止默认行为
  4.     event.preventDefault();
  5.    
  6.     // 阻止事件冒泡
  7.     event.stopPropagation();
  8.    
  9.     // 获取事件目标
  10.     const target = event.target;
  11.     console.log('点击的元素:', target);
  12.    
  13.     // 获取鼠标位置
  14.     console.log('鼠标X坐标:', event.clientX);
  15.     console.log('鼠标Y坐标:', event.clientY);
  16.    
  17.     // 对于键盘事件
  18.     console.log('按下的键:', event.key);
  19.     console.log('键码:', event.keyCode);
  20. });
复制代码

事件委托

事件委托是一种利用事件冒泡机制的技术，通过在父元素上设置事件监听器来处理子元素的事件：
  2. <ul id="itemList">
  3.     <li data-id="1">项目1</li>
  4.     <li data-id="2">项目2</li>
  5.     <li data-id="3">项目3</li>
  6. </ul>
复制代码
  2. // 在父元素上设置事件监听器
  3. const itemList = document.getElementById('itemList');
  5. itemList.addEventListener('click', function(event) {
  6.     // 检查点击的是否是li元素
  7.     if (event.target.tagName === 'LI') {
  8.         // 获取数据属性
  9.         const itemId = event.target.dataset.id;
  10.         console.log('点击了项目:', itemId);
  11.         
  12.         // 添加高亮效果
  13.         // 先移除所有项目的高亮
  14.         document.querySelectorAll('#itemList li').forEach(item => {
  15.             item.classList.remove('highlight');
  16.         });
  17.         
  18.         // 为当前项目添加高亮
  19.         event.target.classList.add('highlight');
  20.     }
  21. });
复制代码

事件委托的优点是：

• 减少事件监听器的数量，提高性能
• 可以处理动态添加的元素的事件
• 简化代码管理

样式操作

直接修改样式

通过元素的style属性可以直接修改CSS样式：
  2. // 获取元素
  3. const box = document.getElementById('box');
  5. // 修改单个样式
  6. box.style.backgroundColor = 'blue';
  7. box.style.width = '200px';
  8. box.style.height = '100px';
  10. // 注意：CSS属性名使用驼峰命名法
  11. // font-size → fontSize
  12. // margin-top → marginTop
复制代码

类名操作

使用classListAPI操作元素的类名：
  2. // 获取元素
  3. const element = document.getElementById('myElement');
  5. // 添加类
  6. element.classList.add('active');
  7. element.classList.add('highlight', 'large');
  9. // 移除类
  10. element.classList.remove('active');
  12. // 切换类（如果存在则移除，不存在则添加）
  13. element.classList.toggle('visible');
  15. // 检查是否包含某个类
  16. const hasClass = element.classList.contains('highlight');
  17. console.log(hasClass); // true 或 false
  19. // 替换类
  20. element.classList.replace('old-class', 'new-class');
复制代码

计算样式

使用getComputedStyle()获取元素的计算样式：
  2. // 获取元素
  3. const element = document.getElementById('myElement');
  5. // 获取计算样式
  6. const styles = window.getComputedStyle(element);
  8. // 获取特定样式属性
  9. const backgroundColor = styles.backgroundColor;
  10. const width = styles.width;
  11. const fontSize = styles.fontSize;
  13. console.log('背景颜色:', backgroundColor);
  14. console.log('宽度:', width);
  15. console.log('字体大小:', fontSize);
复制代码

响应式样式处理

根据窗口大小或其他条件动态调整样式：
  2. // 响应窗口大小变化
  3. window.addEventListener('resize', function() {
  4.     const width = window.innerWidth;
  5.     const element = document.getElementById('responsiveElement');
  6.    
  7.     if (width < 600) {
  8.         element.style.fontSize = '14px';
  9.         element.classList.add('mobile-layout');
  10.     } else if (width < 900) {
  11.         element.style.fontSize = '16px';
  12.         element.classList.remove('mobile-layout');
  13.         element.classList.add('tablet-layout');
  14.     } else {
  15.         element.style.fontSize = '18px';
  16.         element.classList.remove('mobile-layout', 'tablet-layout');
  17.         element.classList.add('desktop-layout');
  18.     }
  19. });
  21. // 初始调用一次以设置初始状态
  22. window.dispatchEvent(new Event('resize'));
复制代码

数据交互

表单数据处理
  2. // 获取表单元素
  3. const form = document.getElementById('myForm');
  5. // 方法1：通过FormData API
  6. function getFormData1() {
  7.     const formData = new FormData(form);
  8.    
  9.     // 转换为普通对象
  10.     const data = {};
  11.     for (let [key, value] of formData.entries()) {
  12.         data[key] = value;
  13.     }
  14.    
  15.     console.log(data);
  16.     return data;
  17. }
  19. // 方法2：手动获取表单字段值
  20. function getFormData2() {
  21.     const data = {
  22.         username: form.querySelector('#username').value,
  23.         email: form.querySelector('#email').value,
  24.         password: form.querySelector('#password').value,
  25.         newsletter: form.querySelector('#newsletter').checked
  26.     };
  27.    
  28.     console.log(data);
  29.     return data;
  30. }
  32. // 表单提交事件
  33. form.addEventListener('submit', function(event) {
  34.     // 阻止表单默认提交行为
  35.     event.preventDefault();
  36.    
  37.     // 获取表单数据
  38.     const formData = getFormData1();
  39.    
  40.     // 发送数据到服务器
  41.     sendDataToServer(formData);
  42. });
复制代码
  2. // 表单验证函数
  3. function validateForm() {
  4.     const form = document.getElementById('myForm');
  5.     const username = form.querySelector('#username').value;
  6.     const email = form.querySelector('#email').value;
  7.     const password = form.querySelector('#password').value;
  8.    
  9.     let isValid = true;
  10.     let errorMessage = '';
  11.    
  12.     // 清除之前的错误信息
  13.     document.querySelectorAll('.error-message').forEach(el => el.remove());
  14.    
  15.     // 验证用户名
  16.     if (username.length < 3) {
  17.         showError('username', '用户名至少需要3个字符');
  18.         isValid = false;
  19.     }
  20.    
  21.     // 验证邮箱
  22.     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  23.     if (!emailRegex.test(email)) {
  24.         showError('email', '请输入有效的邮箱地址');
  25.         isValid = false;
  26.     }
  27.    
  28.     // 验证密码
  29.     if (password.length < 6) {
  30.         showError('password', '密码至少需要6个字符');
  31.         isValid = false;
  32.     }
  33.    
  34.     return isValid;
  35. }
  37. // 显示错误信息
  38. function showError(fieldName, message) {
  39.     const field = document.getElementById(fieldName);
  40.     const errorElement = document.createElement('div');
  41.     errorElement.className = 'error-message';
  42.     errorElement.textContent = message;
  43.     errorElement.style.color = 'red';
  44.     errorElement.style.fontSize = '12px';
  45.    
  46.     field.parentNode.insertBefore(errorElement, field.nextSibling);
  47. }
  49. // 实时验证
  50. document.getElementById('username').addEventListener('input', function() {
  51.     if (this.value.length < 3) {
  52.         showError('username', '用户名至少需要3个字符');
  53.     } else {
  54.         // 清除错误信息
  55.         const errorElement = this.parentNode.querySelector('.error-message');
  56.         if (errorElement) {
  57.             errorElement.remove();
  58.         }
  59.     }
  60. });
  62. // 表单提交时验证
  63. document.getElementById('myForm').addEventListener('submit', function(event) {
  64.     if (!validateForm()) {
  65.         event.preventDefault();
  66.     }
  67. });
复制代码

与服务器交互
  2. // GET请求示例
  3. function fetchData(url) {
  4.     fetch(url)
  5.         .then(response => {
  6.             if (!response.ok) {
  7.                 throw new Error('网络响应不正常');
  8.             }
  9.             return response.json();
  10.         })
  11.         .then(data => {
  12.             console.log('获取的数据:', data);
  13.             renderData(data);
  14.         })
  15.         .catch(error => {
  16.             console.error('获取数据时出错:', error);
  17.             showError('获取数据失败: ' + error.message);
  18.         });
  19. }
  21. // POST请求示例
  22. function postData(url, data) {
  23.     fetch(url, {
  24.         method: 'POST',
  25.         headers: {
  26.             'Content-Type': 'application/json'
  27.         },
  28.         body: JSON.stringify(data)
  29.     })
  30.     .then(response => {
  31.         if (!response.ok) {
  32.             throw new Error('网络响应不正常');
  33.         }
  34.         return response.json();
  35.     })
  36.     .then(data => {
  37.         console.log('服务器响应:', data);
  38.         showSuccess('数据提交成功');
  39.     })
  40.     .catch(error => {
  41.         console.error('提交数据时出错:', error);
  42.         showError('提交数据失败: ' + error.message);
  43.     });
  44. }
  46. // 使用示例
  47. fetchData('https://api.example.com/data');
  49. const formData = {
  50.     username: 'user123',
  51.     email: 'user@example.com'
  52. };
  53. postData('https://api.example.com/submit', formData);
复制代码
  2. // 渲染获取的数据
  3. function renderData(data) {
  4.     const container = document.getElementById('data-container');
  5.    
  6.     // 清空容器
  7.     container.innerHTML = '';
  8.    
  9.     // 检查数据是否为数组
  10.     if (Array.isArray(data)) {
  11.         // 如果是数组，创建列表
  12.         const list = document.createElement('ul');
  13.         
  14.         data.forEach(item => {
  15.             const listItem = document.createElement('li');
  16.             listItem.textContent = item.name || item.title || JSON.stringify(item);
  17.             list.appendChild(listItem);
  18.         });
  19.         
  20.         container.appendChild(list);
  21.     } else if (typeof data === 'object') {
  22.         // 如果是对象，创建表格
  23.         const table = document.createElement('table');
  24.         table.style.width = '100%';
  25.         table.style.borderCollapse = 'collapse';
  26.         
  27.         // 创建表头
  28.         const thead = document.createElement('thead');
  29.         const headerRow = document.createElement('tr');
  30.         
  31.         Object.keys(data).forEach(key => {
  32.             const th = document.createElement('th');
  33.             th.textContent = key;
  34.             th.style.border = '1px solid #ddd';
  35.             th.style.padding = '8px';
  36.             headerRow.appendChild(th);
  37.         });
  38.         
  39.         thead.appendChild(headerRow);
  40.         table.appendChild(thead);
  41.         
  42.         // 创建表体
  43.         const tbody = document.createElement('tbody');
  44.         const row = document.createElement('tr');
  45.         
  46.         Object.values(data).forEach(value => {
  47.             const td = document.createElement('td');
  48.             td.textContent = value;
  49.             td.style.border = '1px solid #ddd';
  50.             td.style.padding = '8px';
  51.             row.appendChild(td);
  52.         });
  53.         
  54.         tbody.appendChild(row);
  55.         table.appendChild(tbody);
  56.         
  57.         container.appendChild(table);
  58.     } else {
  59.         // 其他类型，直接显示
  60.         const content = document.createElement('p');
  61.         content.textContent = String(data);
  62.         container.appendChild(content);
  63.     }
  64. }
复制代码

动态内容加载
  2. // 加载更多内容示例
  3. let page = 1;
  4. const itemsPerPage = 10;
  5. let isLoading = false;
  7. // 加载内容函数
  8. function loadContent() {
  9.     if (isLoading) return;
  10.    
  11.     isLoading = true;
  12.     const loadingIndicator = document.getElementById('loading');
  13.     loadingIndicator.style.display = 'block';
  14.    
  15.     fetch(`https://api.example.com/items?page=${page}&limit=${itemsPerPage}`)
  16.         .then(response => response.json())
  17.         .then(data => {
  18.             if (data.items && data.items.length > 0) {
  19.                 renderItems(data.items);
  20.                 page++;
  21.             } else {
  22.                 // 没有更多数据
  23.                 const endMessage = document.createElement('p');
  24.                 endMessage.textContent = '没有更多内容了';
  25.                 endMessage.style.textAlign = 'center';
  26.                 endMessage.style.margin = '20px 0';
  27.                 document.getElementById('content-container').appendChild(endMessage);
  28.                
  29.                 // 移除滚动事件监听器
  30.                 window.removeEventListener('scroll', handleScroll);
  31.             }
  32.         })
  33.         .catch(error => {
  34.             console.error('加载内容失败:', error);
  35.             showError('加载内容失败: ' + error.message);
  36.         })
  37.         .finally(() => {
  38.             isLoading = false;
  39.             loadingIndicator.style.display = 'none';
  40.         });
  41. }
  43. // 渲染项目
  44. function renderItems(items) {
  45.     const container = document.getElementById('content-container');
  46.    
  47.     items.forEach(item => {
  48.         const itemElement = document.createElement('div');
  49.         itemElement.className = 'item';
  50.         itemElement.style.padding = '15px';
  51.         itemElement.style.marginBottom = '10px';
  52.         itemElement.style.border = '1px solid #eee';
  53.         itemElement.style.borderRadius = '4px';
  54.         
  55.         const title = document.createElement('h3');
  56.         title.textContent = item.title;
  57.         
  58.         const description = document.createElement('p');
  59.         description.textContent = item.description;
  60.         
  61.         itemElement.appendChild(title);
  62.         itemElement.appendChild(description);
  63.         container.appendChild(itemElement);
  64.     });
  65. }
  67. // 滚动事件处理
  68. function handleScroll() {
  69.     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  70.     const windowHeight = window.innerHeight;
  71.     const documentHeight = document.documentElement.scrollHeight;
  72.    
  73.     // 当滚动到接近底部时加载更多内容
  74.     if (scrollTop + windowHeight >= documentHeight - 100) {
  75.         loadContent();
  76.     }
  77. }
  79. // 初始加载
  80. loadContent();
  82. // 添加滚动事件监听器
  83. window.addEventListener('scroll', handleScroll);
  85. // 刷新按钮
  86. document.getElementById('refresh-button').addEventListener('click', function() {
  87.     page = 1;
  88.     document.getElementById('content-container').innerHTML = '';
  89.     loadContent();
  90. });
复制代码

动态内容创建

创建元素和属性
  2. // 创建复杂元素结构
  3. function createProductCard(product) {
  4.     // 创建主容器
  5.     const card = document.createElement('div');
  6.     card.className = 'product-card';
  7.     card.dataset.productId = product.id;
  8.    
  9.     // 创建图片容器
  10.     const imageContainer = document.createElement('div');
  11.     imageContainer.className = 'product-image';
  12.    
  13.     // 创建图片
  14.     const image = document.createElement('img');
  15.     image.src = product.imageUrl;
  16.     image.alt = product.name;
  17.     image.loading = 'lazy'; // 懒加载
  18.    
  19.     imageContainer.appendChild(image);
  20.     card.appendChild(imageContainer);
  21.    
  22.     // 创建信息容器
  23.     const infoContainer = document.createElement('div');
  24.     infoContainer.className = 'product-info';
  25.    
  26.     // 创建标题
  27.     const title = document.createElement('h3');
  28.     title.className = 'product-title';
  29.     title.textContent = product.name;
  30.    
  31.     // 创建描述
  32.     const description = document.createElement('p');
  33.     description.className = 'product-description';
  34.     description.textContent = product.description;
  35.    
  36.     // 创建价格
  37.     const price = document.createElement('div');
  38.     price.className = 'product-price';
  39.     price.textContent = `$${product.price.toFixed(2)}`;
  40.    
  41.     // 创建按钮容器
  42.     const buttonContainer = document.createElement('div');
  43.     buttonContainer.className = 'product-actions';
  44.    
  45.     // 创建添加到购物车按钮
  46.     const addToCartButton = document.createElement('button');
  47.     addToCartButton.className = 'btn btn-primary add-to-cart';
  48.     addToCartButton.textContent = '添加到购物车';
  49.     addToCartButton.dataset.productId = product.id;
  50.    
  51.     // 创建查看详情按钮
  52.     const viewDetailsButton = document.createElement('button');
  53.     viewDetailsButton.className = 'btn btn-secondary view-details';
  54.     viewDetailsButton.textContent = '查看详情';
  55.     viewDetailsButton.dataset.productId = product.id;
  56.    
  57.     buttonContainer.appendChild(addToCartButton);
  58.     buttonContainer.appendChild(viewDetailsButton);
  59.    
  60.     // 组装信息容器
  61.     infoContainer.appendChild(title);
  62.     infoContainer.appendChild(description);
  63.     infoContainer.appendChild(price);
  64.     infoContainer.appendChild(buttonContainer);
  65.    
  66.     // 组装卡片
  67.     card.appendChild(infoContainer);
  68.    
  69.     return card;
  70. }
  72. // 使用示例
  73. const product = {
  74.     id: '123',
  75.     name: '高级无线耳机',
  76.     description: '降噪功能，30小时续航，高音质',
  77.     price: 199.99,
  78.     imageUrl: 'https://example.com/images/headphones.jpg'
  79. };
  81. const productCard = createProductCard(product);
  82. document.getElementById('products-container').appendChild(productCard);
复制代码

文档片段优化

使用文档片段（DocumentFragment）可以提高大量元素插入的性能：
  2. // 不使用文档片段（性能较差）
  3. function renderItemsWithoutFragment(items) {
  4.     const container = document.getElementById('items-container');
  5.    
  6.     items.forEach(item => {
  7.         const itemElement = document.createElement('div');
  8.         itemElement.className = 'item';
  9.         itemElement.textContent = item.name;
  10.         
  11.         // 每次appendChild都会触发重排
  12.         container.appendChild(itemElement);
  13.     });
  14. }
  16. // 使用文档片段（性能更好）
  17. function renderItemsWithFragment(items) {
  18.     const container = document.getElementById('items-container');
  19.     const fragment = document.createDocumentFragment();
  20.    
  21.     items.forEach(item => {
  22.         const itemElement = document.createElement('div');
  23.         itemElement.className = 'item';
  24.         itemElement.textContent = item.name;
  25.         
  26.         // 先添加到文档片段中，不会触发重排
  27.         fragment.appendChild(itemElement);
  28.     });
  29.    
  30.     // 一次性将文档片段添加到DOM，只触发一次重排
  31.     container.appendChild(fragment);
  32. }
  34. // 性能对比示例
  35. function testPerformance() {
  36.     const items = Array.from({length: 1000}, (_, i) => ({name: `项目 ${i+1}`}));
  37.    
  38.     console.time('不使用文档片段');
  39.     renderItemsWithoutFragment(items);
  40.     console.timeEnd('不使用文档片段');
  41.    
  42.     // 清空容器
  43.     document.getElementById('items-container').innerHTML = '';
  44.    
  45.     console.time('使用文档片段');
  46.     renderItemsWithFragment(items);
  47.     console.timeEnd('使用文档片段');
  48. }
  50. // 运行性能测试
  51. testPerformance();
复制代码

模板元素

使用HTML模板元素（<template>）可以定义可重用的HTML结构：
  2. <!-- 在HTML中定义模板 -->
  3. <template id="user-card-template">
  4.     <div class="user-card">
  5.         <div class="user-avatar">
  6.             <img src="" alt="用户头像">
  7.         </div>
  8.         <div class="user-info">
  9.             <h3 class="user-name"></h3>
  10.             <p class="user-email"></p>
  11.             <div class="user-actions">
  12.                 <button class="btn btn-edit">编辑</button>
  13.                 <button class="btn btn-delete">删除</button>
  14.             </div>
  15.         </div>
  16.     </div>
  17. </template>
复制代码
  2. // 使用模板创建用户卡片
  3. function createUserCard(user) {
  4.     // 获取模板
  5.     const template = document.getElementById('user-card-template');
  6.    
  7.     // 克隆模板内容
  8.     const clone = document.importNode(template.content, true);
  9.    
  10.     // 填充数据
  11.     clone.querySelector('.user-name').textContent = user.name;
  12.     clone.querySelector('.user-email').textContent = user.email;
  13.     clone.querySelector('.user-avatar img').src = user.avatarUrl;
  14.     clone.querySelector('.user-avatar img').alt = user.name;
  15.    
  16.     // 添加事件监听器
  17.     const editButton = clone.querySelector('.btn-edit');
  18.     const deleteButton = clone.querySelector('.btn-delete');
  19.    
  20.     editButton.addEventListener('click', () => editUser(user.id));
  21.     deleteButton.addEventListener('click', () => deleteUser(user.id));
  22.    
  23.     // 创建一个容器来容纳克隆的内容
  24.     const container = document.createElement('div');
  25.     container.appendChild(clone);
  26.    
  27.     return container;
  28. }
  30. // 使用示例
  31. const user = {
  32.     id: '456',
  33.     name: '李四',
  34.     email: 'lisi@example.com',
  35.     avatarUrl: 'https://example.com/avatars/user456.jpg'
  36. };
  38. const userCard = createUserCard(user);
  39. document.getElementById('users-container').appendChild(userCard);
  41. // 编辑用户函数
  42. function editUser(userId) {
  43.     console.log(`编辑用户: ${userId}`);
  44.     // 实现编辑逻辑...
  45. }
  47. // 删除用户函数
  48. function deleteUser(userId) {
  49.     console.log(`删除用户: ${userId}`);
  50.     // 实现删除逻辑...
  51. }
复制代码

高级DOM操作

性能优化
  2. // 不好的做法：多次修改样式，导致多次重排
  3. function badPerformanceExample() {
  4.     const element = document.getElementById('box');
  5.    
  6.     // 每次修改都会触发重排
  7.     element.style.width = '100px';
  8.     element.style.height = '100px';
  9.     element.style.backgroundColor = 'red';
  10.     element.style.border = '1px solid black';
  11. }
  13. // 好的做法：批量修改样式，减少重排次数
  14. function goodPerformanceExample() {
  15.     const element = document.getElementById('box');
  16.    
  17.     // 方法1：使用cssText一次性设置多个样式
  18.     element.style.cssText = 'width: 100px; height: 100px; background-color: red; border: 1px solid black;';
  19.    
  20.     // 方法2：添加类名（推荐）
  21.     element.className = 'box-style';
  22. }
  24. // 方法2对应的CSS
  25. /*
  26. .box-style {
  27.     width: 100px;
  28.     height: 100px;
  29.     background-color: red;
  30.     border: 1px solid black;
  31. }
  32. */
复制代码
  2. // 不好的做法：使用setInterval
  3. function badAnimation() {
  4.     const element = document.getElementById('moving-box');
  5.     let position = 0;
  6.    
  7.     const interval = setInterval(() => {
  8.         position += 5;
  9.         element.style.left = position + 'px';
  10.         
  11.         if (position >= 300) {
  12.             clearInterval(interval);
  13.         }
  14.     }, 16); // 约60fps
  15. }
  17. // 好的做法：使用requestAnimationFrame
  18. function goodAnimation() {
  19.     const element = document.getElementById('moving-box');
  20.     let position = 0;
  21.     let animationId;
  22.    
  23.     function animate() {
  24.         position += 5;
  25.         element.style.left = position + 'px';
  26.         
  27.         if (position < 300) {
  28.             animationId = requestAnimationFrame(animate);
  29.         }
  30.     }
  31.    
  32.     // 开始动画
  33.     animationId = requestAnimationFrame(animate);
  34.    
  35.     // 返回一个取消函数
  36.     return function cancel() {
  37.         cancelAnimationFrame(animationId);
  38.     };
  39. }
  41. // 使用示例
  42. const cancelAnimation = goodAnimation();
  44. // 如果需要取消动画
  45. // cancelAnimation();
复制代码

对于大量数据的列表，使用虚拟滚动可以显著提高性能：
  2. class VirtualScroll {
  3.     constructor(container, itemHeight, totalItems, renderItem) {
  4.         this.container = container;
  5.         this.itemHeight = itemHeight;
  6.         this.totalItems = totalItems;
  7.         this.renderItem = renderItem;
  8.         this.visibleItems = Math.ceil(container.clientHeight / itemHeight) + 2;
  9.         this.buffer = 5; // 上下缓冲区
  10.         this.startIndex = 0;
  11.         this.scrollTop = 0;
  12.         
  13.         // 创建内容容器
  14.         this.content = document.createElement('div');
  15.         this.content.style.position = 'relative';
  16.         this.content.style.height = `${totalItems * itemHeight}px`;
  17.         container.appendChild(this.content);
  18.         
  19.         // 创建视口容器
  20.         this.viewport = document.createElement('div');
  21.         this.viewport.style.position = 'absolute';
  22.         this.viewport.style.top = '0';
  23.         this.viewport.style.left = '0';
  24.         this.viewport.style.right = '0';
  25.         this.viewport.style.bottom = '0';
  26.         this.viewport.style.overflow = 'hidden';
  27.         this.content.appendChild(this.viewport);
  28.         
  29.         // 初始化
  30.         this.renderItems();
  31.         
  32.         // 添加滚动事件监听
  33.         container.addEventListener('scroll', this.handleScroll.bind(this));
  34.     }
  35.    
  36.     handleScroll() {
  37.         const scrollTop = this.container.scrollTop;
  38.         
  39.         // 计算起始索引
  40.         const startIndex = Math.max(0, Math.floor(scrollTop / this.itemHeight) - this.buffer);
  41.         
  42.         // 如果索引有变化，重新渲染
  43.         if (startIndex !== this.startIndex) {
  44.             this.startIndex = startIndex;
  45.             this.renderItems();
  46.         }
  47.     }
  48.    
  49.     renderItems() {
  50.         // 清空视口
  51.         this.viewport.innerHTML = '';
  52.         
  53.         // 计算要渲染的项目范围
  54.         const endIndex = Math.min(
  55.             this.totalItems - 1,
  56.             this.startIndex + this.visibleItems + this.buffer * 2
  57.         );
  58.         
  59.         // 渲染项目
  60.         for (let i = this.startIndex; i <= endIndex; i++) {
  61.             const itemElement = this.renderItem(i);
  62.             itemElement.style.position = 'absolute';
  63.             itemElement.style.top = `${i * this.itemHeight}px`;
  64.             itemElement.style.width = '100%';
  65.             itemElement.style.height = `${this.itemHeight}px`;
  66.             this.viewport.appendChild(itemElement);
  67.         }
  68.     }
  69.    
  70.     updateItem(index, data) {
  71.         // 更新特定项目的数据
  72.         // 实现取决于具体需求
  73.     }
  74.    
  75.     destroy() {
  76.         // 清理资源
  77.         this.container.removeEventListener('scroll', this.handleScroll);
  78.         this.container.innerHTML = '';
  79.     }
  80. }
  82. // 使用示例
  83. const container = document.getElementById('virtual-scroll-container');
  84. const itemHeight = 50;
  85. const totalItems = 1000;
  87. // 渲染单个项目的函数
  88. function renderItem(index) {
  89.     const item = document.createElement('div');
  90.     item.className = 'list-item';
  91.     item.textContent = `项目 ${index + 1}`;
  92.     item.style.padding = '10px';
  93.     item.style.borderBottom = '1px solid #eee';
  94.    
  95.     // 根据索引交替背景色
  96.     if (index % 2 === 0) {
  97.         item.style.backgroundColor = '#f9f9f9';
  98.     }
  99.    
  100.     return item;
  101. }
  103. // 创建虚拟滚动实例
  104. const virtualScroll = new VirtualScroll(container, itemHeight, totalItems, renderItem);
复制代码

MutationObserver

使用MutationObserver监听DOM变化：
  2. // 创建MutationObserver实例
  3. const observer = new MutationObserver((mutations) => {
  4.     mutations.forEach((mutation) => {
  5.         console.log('Mutation类型:', mutation.type);
  6.         
  7.         if (mutation.type === 'childList') {
  8.             console.log('添加的节点:', mutation.addedNodes);
  9.             console.log('移除的节点:', mutation.removedNodes);
  10.         }
  11.         
  12.         if (mutation.type === 'attributes') {
  13.             console.log('改变的属性:', mutation.attributeName);
  14.             console.log('旧值:', mutation.oldValue);
  15.         }
  16.         
  17.         if (mutation.type === 'characterData') {
  18.             console.log('文本内容改变:', mutation.target);
  19.         }
  20.     });
  21. });
  23. // 配置观察选项
  24. const config = {
  25.     attributes: true,      // 观察属性变化
  26.     childList: true,       // 观察子节点添加/删除
  27.     subtree: true,         // 观察所有后代节点的变化
  28.     characterData: true,   // 观察文本内容变化
  29.     attributeOldValue: true, // 记录属性旧值
  30.     characterDataOldValue: true // 记录文本旧值
  31. };
  33. // 开始观察目标节点
  34. const targetNode = document.getElementById('observed-container');
  35. observer.observe(targetNode, config);
  37. // 测试DOM变化
  38. function testChanges() {
  39.     // 添加子节点
  40.     const newElement = document.createElement('div');
  41.     newElement.textContent = '新添加的元素';
  42.     targetNode.appendChild(newElement);
  43.    
  44.     // 修改属性
  45.     targetNode.setAttribute('data-test', 'value');
  46.    
  47.     // 修改文本内容
  48.     const textNode = document.createTextNode('修改的文本');
  49.     targetNode.appendChild(textNode);
  50.     textNode.nodeValue = '已修改的文本';
  51.    
  52.     // 移除节点
  53.     setTimeout(() => {
  54.         targetNode.removeChild(newElement);
  55.     }, 2000);
  56. }
  58. // 运行测试
  59. testChanges();
  61. // 停止观察
  62. // observer.disconnect();
复制代码

自定义元素

创建自定义HTML元素：
  2. // 定义一个自定义元素类
  3. class UserCard extends HTMLElement {
  4.     constructor() {
  5.         super();
  6.         
  7.         // 创建影子DOM
  8.         this.attachShadow({ mode: 'open' });
  9.         
  10.         // 初始化默认数据
  11.         this._user = {
  12.             name: '默认用户',
  13.             email: 'user@example.com',
  14.             avatar: 'https://example.com/default-avatar.png'
  15.         };
  16.     }
  17.    
  18.     // 观察的属性
  19.     static get observedAttributes() {
  20.         return ['name', 'email', 'avatar'];
  21.     }
  22.    
  23.     // 属性变化时的回调
  24.     attributeChangedCallback(name, oldValue, newValue) {
  25.         if (oldValue === newValue) return;
  26.         
  27.         switch(name) {
  28.             case 'name':
  29.                 this._user.name = newValue;
  30.                 break;
  31.             case 'email':
  32.                 this._user.email = newValue;
  33.                 break;
  34.             case 'avatar':
  35.                 this._user.avatar = newValue;
  36.                 break;
  37.         }
  38.         
  39.         this.render();
  40.     }
  41.    
  42.     // 连接到DOM时的回调
  43.     connectedCallback() {
  44.         this.render();
  45.     }
  46.    
  47.     // 从DOM断开时的回调
  48.     disconnectedCallback() {
  49.         // 清理资源
  50.     }
  51.    
  52.     // 渲染方法
  53.     render() {
  54.         // 定义模板
  55.         const template = document.createElement('template');
  56.         template.innerHTML = `
  57.             <style>
  58.                 .user-card {
  59.                     display: flex;
  60.                     align-items: center;
  61.                     padding: 15px;
  62.                     border-radius: 8px;
  63.                     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  64.                     background-color: white;
  65.                     font-family: Arial, sans-serif;
  66.                     max-width: 400px;
  67.                 }
  68.                
  69.                 .user-avatar {
  70.                     width: 60px;
  71.                     height: 60px;
  72.                     border-radius: 50%;
  73.                     margin-right: 15px;
  74.                     object-fit: cover;
  75.                 }
  76.                
  77.                 .user-info {
  78.                     flex: 1;
  79.                 }
  80.                
  81.                 .user-name {
  82.                     margin: 0 0 5px 0;
  83.                     font-size: 18px;
  84.                     color: #333;
  85.                 }
  86.                
  87.                 .user-email {
  88.                     margin: 0;
  89.                     font-size: 14px;
  90.                     color: #666;
  91.                 }
  92.             </style>
  93.             
  94.             <div class="user-card">
  95.                 <img class="user-avatar" src="${this._user.avatar}" alt="${this._user.name}">
  96.                 <div class="user-info">
  97.                     <h3 class="user-name">${this._user.name}</h3>
  98.                     <p class="user-email">${this._user.email}</p>
  99.                 </div>
  100.             </div>
  101.         `;
  102.         
  103.         // 清空影子DOM并添加模板内容
  104.         this.shadowRoot.innerHTML = '';
  105.         this.shadowRoot.appendChild(template.content.cloneNode(true));
  106.     }
  107.    
  108.     // 设置用户数据的方法
  109.     setUser(user) {
  110.         this._user = { ...this._user, ...user };
  111.         
  112.         // 更新属性
  113.         if (user.name) this.setAttribute('name', user.name);
  114.         if (user.email) this.setAttribute('email', user.email);
  115.         if (user.avatar) this.setAttribute('avatar', user.avatar);
  116.         
  117.         this.render();
  118.     }
  119.    
  120.     // 获取用户数据的方法
  121.     getUser() {
  122.         return { ...this._user };
  123.     }
  124. }
  126. // 注册自定义元素
  127. customElements.define('user-card', UserCard);
  129. // 使用示例
  130. // 在HTML中：
  131. // <user-card name="张三" email="zhangsan@example.com" avatar="https://example.com/avatar1.png"></user-card>
  133. // 或通过JavaScript创建：
  134. const userCard = document.createElement('user-card');
  135. userCard.setAttribute('name', '李四');
  136. userCard.setAttribute('email', 'lisi@example.com');
  137. userCard.setAttribute('avatar', 'https://example.com/avatar2.png');
  138. document.getElementById('user-container').appendChild(userCard);
  140. // 使用setUser方法更新数据
  141. userCard.setUser({
  142.     name: '王五',
  143.     email: 'wangwu@example.com',
  144.     avatar: 'https://example.com/avatar3.png'
  145. });
  147. // 获取用户数据
  148. const userData = userCard.getUser();
  149. console.log(userData);
复制代码

实战案例：构建一个完整的响应式网页应用

项目概述

我们将构建一个任务管理应用，具有以下功能：

1. 添加、编辑、删除任务
2. 标记任务为完成/未完成
3. 按状态筛选任务（全部/进行中/已完成）
4. 本地存储任务数据
5. 响应式设计，适配不同设备

HTML结构
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>任务管理应用</title>
  8.     <link rel="stylesheet" href="styles.css">
  9. </head>
  10. <body>
  11.     <div class="app-container">
  12.         <header class="app-header">
  13.             <h1>任务管理</h1>
  14.         </header>
  15.         
  16.         <main class="app-main">
  17.             <section class="task-input-section">
  18.                 <form id="task-form" class="task-form">
  19.                     <input
  20.                         type="text"
  21.                         id="task-input"
  22.                         class="task-input"
  23.                         placeholder="添加新任务..."
  24.                         autocomplete="off"
  25.                         required
  26.                     >
  27.                     <button type="submit" class="btn btn-primary">添加</button>
  28.                 </form>
  29.             </section>
  30.             
  31.             <section class="task-filter-section">
  32.                 <div class="filter-buttons">
  33.                     <button class="filter-btn active" data-filter="all">全部</button>
  34.                     <button class="filter-btn" data-filter="active">进行中</button>
  35.                     <button class="filter-btn" data-filter="completed">已完成</button>
  36.                 </div>
  37.                 <div class="task-stats">
  38.                     <span id="task-count">0 个任务</span>
  39.                 </div>
  40.             </section>
  41.             
  42.             <section class="task-list-section">
  43.                 <ul id="task-list" class="task-list">
  44.                     <!-- 任务项将通过JavaScript动态添加 -->
  45.                 </ul>
  46.                 <div id="empty-state" class="empty-state">
  47.                     <p>没有任务，添加一个新任务开始吧！</p>
  48.                 </div>
  49.             </section>
  50.         </main>
  51.         
  52.         <footer class="app-footer">
  53.             <p>&copy; 2023 任务管理应用</p>
  54.         </footer>
  55.     </div>
  57.     <!-- 编辑任务模态框 -->
  58.     <div id="edit-modal" class="modal">
  59.         <div class="modal-content">
  60.             <span class="close-btn">&times;</span>
  61.             <h2>编辑任务</h2>
  62.             <form id="edit-form">
  63.                 <input type="hidden" id="edit-task-id">
  64.                 <input
  65.                     type="text"
  66.                     id="edit-task-input"
  67.                     class="task-input"
  68.                     placeholder="任务内容..."
  69.                     required
  70.                 >
  71.                 <div class="form-actions">
  72.                     <button type="submit" class="btn btn-primary">保存</button>
  73.                     <button type="button" class="btn btn-secondary cancel-btn">取消</button>
  74.                 </div>
  75.             </form>
  76.         </div>
  77.     </div>
  79.     <script src="app.js"></script>
  80. </body>
  81. </html>
复制代码

CSS样式
  2. /* 基础样式 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  9. body {
  10.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  11.     line-height: 1.6;
  12.     color: #333;
  13.     background-color: #f5f5f5;
  14. }
  16. .app-container {
  17.     max-width: 800px;
  18.     margin: 0 auto;
  19.     padding: 20px;
  20. }
  22. /* 头部样式 */
  23. .app-header {
  24.     text-align: center;
  25.     margin-bottom: 30px;
  26. }
  28. .app-header h1 {
  29.     color: #2c3e50;
  30.     font-size: 2.5rem;
  31. }
  33. /* 主要内容区域 */
  34. .app-main {
  35.     background-color: white;
  36.     border-radius: 8px;
  37.     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  38.     padding: 20px;
  39. }
  41. /* 任务输入区域 */
  42. .task-input-section {
  43.     margin-bottom: 20px;
  44. }
  46. .task-form {
  47.     display: flex;
  48. }
  50. .task-input {
  51.     flex: 1;
  52.     padding: 12px 15px;
  53.     border: 1px solid #ddd;
  54.     border-radius: 4px 0 0 4px;
  55.     font-size: 16px;
  56. }
  58. .task-input:focus {
  59.     outline: none;
  60.     border-color: #3498db;
  61. }
  63. .btn {
  64.     padding: 12px 20px;
  65.     border: none;
  66.     border-radius: 0 4px 4px 0;
  67.     cursor: pointer;
  68.     font-size: 16px;
  69.     transition: background-color 0.3s;
  70. }
  72. .btn-primary {
  73.     background-color: #3498db;
  74.     color: white;
  75. }
  77. .btn-primary:hover {
  78.     background-color: #2980b9;
  79. }
  81. .btn-secondary {
  82.     background-color: #95a5a6;
  83.     color: white;
  84. }
  86. .btn-secondary:hover {
  87.     background-color: #7f8c8d;
  88. }
  90. /* 任务筛选区域 */
  91. .task-filter-section {
  92.     display: flex;
  93.     justify-content: space-between;
  94.     align-items: center;
  95.     margin-bottom: 20px;
  96.     padding-bottom: 15px;
  97.     border-bottom: 1px solid #eee;
  98. }
  100. .filter-buttons {
  101.     display: flex;
  102.     gap: 10px;
  103. }
  105. .filter-btn {
  106.     padding: 8px 15px;
  107.     border: 1px solid #ddd;
  108.     background-color: white;
  109.     border-radius: 4px;
  110.     cursor: pointer;
  111.     transition: all 0.3s;
  112. }
  114. .filter-btn.active {
  115.     background-color: #3498db;
  116.     color: white;
  117.     border-color: #3498db;
  118. }
  120. .filter-btn:not(.active):hover {
  121.     background-color: #f5f5f5;
  122. }
  124. .task-stats {
  125.     color: #7f8c8d;
  126.     font-size: 14px;
  127. }
  129. /* 任务列表区域 */
  130. .task-list {
  131.     list-style: none;
  132. }
  134. .task-item {
  135.     display: flex;
  136.     align-items: center;
  137.     padding: 15px;
  138.     border-bottom: 1px solid #eee;
  139.     transition: background-color 0.3s;
  140. }
  142. .task-item:hover {
  143.     background-color: #f9f9f9;
  144. }
  146. .task-item:last-child {
  147.     border-bottom: none;
  148. }
  150. .task-checkbox {
  151.     margin-right: 15px;
  152.     width: 20px;
  153.     height: 20px;
  154.     cursor: pointer;
  155. }
  157. .task-text {
  158.     flex: 1;
  159.     font-size: 16px;
  160. }
  162. .task-item.completed .task-text {
  163.     text-decoration: line-through;
  164.     color: #95a5a6;
  165. }
  167. .task-actions {
  168.     display: flex;
  169.     gap: 10px;
  170. }
  172. .task-btn {
  173.     background: none;
  174.     border: none;
  175.     cursor: pointer;
  176.     color: #7f8c8d;
  177.     font-size: 16px;
  178.     transition: color 0.3s;
  179. }
  181. .task-btn:hover {
  182.     color: #3498db;
  183. }
  185. .task-btn.delete:hover {
  186.     color: #e74c3c;
  187. }
  189. .empty-state {
  190.     text-align: center;
  191.     padding: 40px 20px;
  192.     color: #95a5a6;
  193. }
  195. /* 模态框样式 */
  196. .modal {
  197.     display: none;
  198.     position: fixed;
  199.     top: 0;
  200.     left: 0;
  201.     width: 100%;
  202.     height: 100%;
  203.     background-color: rgba(0, 0, 0, 0.5);
  204.     z-index: 1000;
  205.     justify-content: center;
  206.     align-items: center;
  207. }
  209. .modal-content {
  210.     background-color: white;
  211.     padding: 30px;
  212.     border-radius: 8px;
  213.     width: 90%;
  214.     max-width: 500px;
  215.     position: relative;
  216. }
  218. .close-btn {
  219.     position: absolute;
  220.     top: 15px;
  221.     right: 15px;
  222.     font-size: 24px;
  223.     cursor: pointer;
  224.     color: #95a5a6;
  225. }
  227. .close-btn:hover {
  228.     color: #333;
  229. }
  231. #edit-form {
  232.     margin-top: 20px;
  233. }
  235. #edit-task-input {
  236.     width: 100%;
  237.     padding: 12px 15px;
  238.     border: 1px solid #ddd;
  239.     border-radius: 4px;
  240.     font-size: 16px;
  241.     margin-bottom: 20px;
  242. }
  244. .form-actions {
  245.     display: flex;
  246.     justify-content: flex-end;
  247.     gap: 10px;
  248. }
  250. .form-actions .btn {
  251.     border-radius: 4px;
  252. }
  254. /* 响应式设计 */
  255. @media (max-width: 600px) {
  256.     .app-container {
  257.         padding: 10px;
  258.     }
  259.    
  260.     .app-header h1 {
  261.         font-size: 2rem;
  262.     }
  263.    
  264.     .task-filter-section {
  265.         flex-direction: column;
  266.         align-items: flex-start;
  267.         gap: 10px;
  268.     }
  269.    
  270.     .filter-buttons {
  271.         width: 100%;
  272.         justify-content: space-between;
  273.     }
  274.    
  275.     .task-item {
  276.         padding: 12px;
  277.     }
  278.    
  279.     .modal-content {
  280.         padding: 20px;
  281.     }
  282. }
复制代码

JavaScript逻辑
  2. // 任务管理应用类
  3. class TaskManager {
  4.     constructor() {
  5.         this.tasks = this.loadTasks();
  6.         this.currentFilter = 'all';
  7.         this.nextId = this.tasks.length > 0 ? Math.max(...this.tasks.map(task => task.id)) + 1 : 1;
  8.         
  9.         // DOM元素
  10.         this.taskForm = document.getElementById('task-form');
  11.         this.taskInput = document.getElementById('task-input');
  12.         this.taskList = document.getElementById('task-list');
  13.         this.emptyState = document.getElementById('empty-state');
  14.         this.taskCount = document.getElementById('task-count');
  15.         this.filterButtons = document.querySelectorAll('.filter-btn');
  16.         
  17.         // 编辑模态框元素
  18.         this.editModal = document.getElementById('edit-modal');
  19.         this.editForm = document.getElementById('edit-form');
  20.         this.editTaskId = document.getElementById('edit-task-id');
  21.         this.editTaskInput = document.getElementById('edit-task-input');
  22.         this.closeBtn = document.querySelector('.close-btn');
  23.         this.cancelBtn = document.querySelector('.cancel-btn');
  24.         
  25.         // 初始化
  26.         this.init();
  27.     }
  28.    
  29.     // 初始化方法
  30.     init() {
  31.         // 渲染任务列表
  32.         this.renderTasks();
  33.         
  34.         // 添加表单提交事件
  35.         this.taskForm.addEventListener('submit', (e) => {
  36.             e.preventDefault();
  37.             this.addTask(this.taskInput.value.trim());
  38.             this.taskInput.value = '';
  39.             this.taskInput.focus();
  40.         });
  41.         
  42.         // 添加筛选按钮点击事件
  43.         this.filterButtons.forEach(button => {
  44.             button.addEventListener('click', () => {
  45.                 // 更新活动按钮
  46.                 this.filterButtons.forEach(btn => btn.classList.remove('active'));
  47.                 button.classList.add('active');
  48.                
  49.                 // 更新当前筛选器并重新渲染
  50.                 this.currentFilter = button.dataset.filter;
  51.                 this.renderTasks();
  52.             });
  53.         });
  54.         
  55.         // 编辑表单提交事件
  56.         this.editForm.addEventListener('submit', (e) => {
  57.             e.preventDefault();
  58.             this.saveEditTask();
  59.         });
  60.         
  61.         // 模态框关闭事件
  62.         this.closeBtn.addEventListener('click', () => this.closeEditModal());
  63.         this.cancelBtn.addEventListener('click', () => this.closeEditModal());
  64.         
  65.         // 点击模态框外部关闭
  66.         window.addEventListener('click', (e) => {
  67.             if (e.target === this.editModal) {
  68.                 this.closeEditModal();
  69.             }
  70.         });
  71.     }
  72.    
  73.     // 从本地存储加载任务
  74.     loadTasks() {
  75.         const tasksJSON = localStorage.getItem('tasks');
  76.         return tasksJSON ? JSON.parse(tasksJSON) : [];
  77.     }
  78.    
  79.     // 保存任务到本地存储
  80.     saveTasks() {
  81.         localStorage.setItem('tasks', JSON.stringify(this.tasks));
  82.     }
  83.    
  84.     // 添加新任务
  85.     addTask(text) {
  86.         if (!text) return;
  87.         
  88.         const newTask = {
  89.             id: this.nextId++,
  90.             text: text,
  91.             completed: false,
  92.             createdAt: new Date().toISOString()
  93.         };
  94.         
  95.         this.tasks.unshift(newTask);
  96.         this.saveTasks();
  97.         this.renderTasks();
  98.     }
  99.    
  100.     // 删除任务
  101.     deleteTask(id) {
  102.         this.tasks = this.tasks.filter(task => task.id !== id);
  103.         this.saveTasks();
  104.         this.renderTasks();
  105.     }
  106.    
  107.     // 切换任务完成状态
  108.     toggleTask(id) {
  109.         const task = this.tasks.find(task => task.id === id);
  110.         if (task) {
  111.             task.completed = !task.completed;
  112.             this.saveTasks();
  113.             this.renderTasks();
  114.         }
  115.     }
  116.    
  117.     // 打开编辑模态框
  118.     openEditModal(id) {
  119.         const task = this.tasks.find(task => task.id === id);
  120.         if (task) {
  121.             this.editTaskId.value = task.id;
  122.             this.editTaskInput.value = task.text;
  123.             this.editModal.style.display = 'flex';
  124.             this.editTaskInput.focus();
  125.         }
  126.     }
  127.    
  128.     // 关闭编辑模态框
  129.     closeEditModal() {
  130.         this.editModal.style.display = 'none';
  131.         this.editTaskId.value = '';
  132.         this.editTaskInput.value = '';
  133.     }
  134.    
  135.     // 保存编辑的任务
  136.     saveEditTask() {
  137.         const id = parseInt(this.editTaskId.value);
  138.         const newText = this.editTaskInput.value.trim();
  139.         
  140.         if (!newText) return;
  141.         
  142.         const task = this.tasks.find(task => task.id === id);
  143.         if (task) {
  144.             task.text = newText;
  145.             this.saveTasks();
  146.             this.renderTasks();
  147.             this.closeEditModal();
  148.         }
  149.     }
  150.    
  151.     // 获取筛选后的任务
  152.     getFilteredTasks() {
  153.         switch (this.currentFilter) {
  154.             case 'active':
  155.                 return this.tasks.filter(task => !task.completed);
  156.             case 'completed':
  157.                 return this.tasks.filter(task => task.completed);
  158.             default:
  159.                 return this.tasks;
  160.         }
  161.     }
  162.    
  163.     // 渲染任务列表
  164.     renderTasks() {
  165.         const filteredTasks = this.getFilteredTasks();
  166.         
  167.         // 清空任务列表
  168.         this.taskList.innerHTML = '';
  169.         
  170.         // 显示或隐藏空状态
  171.         if (filteredTasks.length === 0) {
  172.             this.emptyState.style.display = 'block';
  173.             this.taskList.style.display = 'none';
  174.         } else {
  175.             this.emptyState.style.display = 'none';
  176.             this.taskList.style.display = 'block';
  177.             
  178.             // 渲染任务项
  179.             filteredTasks.forEach(task => {
  180.                 const taskItem = this.createTaskElement(task);
  181.                 this.taskList.appendChild(taskItem);
  182.             });
  183.         }
  184.         
  185.         // 更新任务计数
  186.         this.updateTaskCount();
  187.     }
  188.    
  189.     // 创建任务元素
  190.     createTaskElement(task) {
  191.         const li = document.createElement('li');
  192.         li.className = `task-item ${task.completed ? 'completed' : ''}`;
  193.         li.dataset.id = task.id;
  194.         
  195.         // 复选框
  196.         const checkbox = document.createElement('input');
  197.         checkbox.type = 'checkbox';
  198.         checkbox.className = 'task-checkbox';
  199.         checkbox.checked = task.completed;
  200.         checkbox.addEventListener('change', () => this.toggleTask(task.id));
  201.         
  202.         // 任务文本
  203.         const taskText = document.createElement('span');
  204.         taskText.className = 'task-text';
  205.         taskText.textContent = task.text;
  206.         
  207.         // 操作按钮容器
  208.         const taskActions = document.createElement('div');
  209.         taskActions.className = 'task-actions';
  210.         
  211.         // 编辑按钮
  212.         const editBtn = document.createElement('button');
  213.         editBtn.className = 'task-btn edit';
  214.         editBtn.innerHTML = '✏️';
  215.         editBtn.title = '编辑任务';
  216.         editBtn.addEventListener('click', () => this.openEditModal(task.id));
  217.         
  218.         // 删除按钮
  219.         const deleteBtn = document.createElement('button');
  220.         deleteBtn.className = 'task-btn delete';
  221.         deleteBtn.innerHTML = '🗑️';
  222.         deleteBtn.title = '删除任务';
  223.         deleteBtn.addEventListener('click', () => this.deleteTask(task.id));
  224.         
  225.         // 组装任务项
  226.         taskActions.appendChild(editBtn);
  227.         taskActions.appendChild(deleteBtn);
  228.         
  229.         li.appendChild(checkbox);
  230.         li.appendChild(taskText);
  231.         li.appendChild(taskActions);
  232.         
  233.         return li;
  234.     }
  235.    
  236.     // 更新任务计数
  237.     updateTaskCount() {
  238.         const filteredTasks = this.getFilteredTasks();
  239.         const totalTasks = this.tasks.length;
  240.         const activeTasks = this.tasks.filter(task => !task.completed).length;
  241.         const completedTasks = this.tasks.filter(task => task.completed).length;
  242.         
  243.         let countText = '';
  244.         
  245.         switch (this.currentFilter) {
  246.             case 'active':
  247.                 countText = `${activeTasks} 个进行中的任务`;
  248.                 break;
  249.             case 'completed':
  250.                 countText = `${completedTasks} 个已完成的任务`;
  251.                 break;
  252.             default:
  253.                 countText = `${totalTasks} 个任务`;
  254.         }
  255.         
  256.         this.taskCount.textContent = countText;
  257.     }
  258. }
  260. // 当DOM加载完成后初始化应用
  261. document.addEventListener('DOMContentLoaded', () => {
  262.     const taskManager = new TaskManager();
  263.    
  264.     // 添加一些示例任务（仅在首次加载时）
  265.     if (taskManager.tasks.length === 0) {
  266.         taskManager.addTask('学习JavaScript DOM操作');
  267.         taskManager.addTask('构建响应式网页应用');
  268.         taskManager.addTask('完成项目文档');
  269.         
  270.         // 标记一个任务为已完成
  271.         taskManager.toggleTask(1);
  272.     }
  273. });
复制代码

功能说明

这个任务管理应用实现了以下功能：

1. 任务管理：添加新任务编辑现有任务删除任务标记任务为完成/未完成
2. 添加新任务
3. 编辑现有任务
4. 删除任务
5. 标记任务为完成/未完成
6. 任务筛选：查看所有任务只查看进行中的任务只查看已完成的任务
7. 查看所有任务
8. 只查看进行中的任务
9. 只查看已完成的任务
10. 数据持久化：使用localStorage保存任务数据页面刷新后数据不会丢失
11. 使用localStorage保存任务数据
12. 页面刷新后数据不会丢失
13. 响应式设计：适配桌面和移动设备在小屏幕上自动调整布局
14. 适配桌面和移动设备
15. 在小屏幕上自动调整布局
16. 用户体验优化：空状态提示任务计数显示模态框编辑任务平滑的过渡动画
17. 空状态提示
18. 任务计数显示
19. 模态框编辑任务
20. 平滑的过渡动画

任务管理：

• 添加新任务
• 编辑现有任务
• 删除任务
• 标记任务为完成/未完成

任务筛选：

• 查看所有任务
• 只查看进行中的任务
• 只查看已完成的任务

数据持久化：

• 使用localStorage保存任务数据
• 页面刷新后数据不会丢失

响应式设计：

• 适配桌面和移动设备
• 在小屏幕上自动调整布局

用户体验优化：

• 空状态提示
• 任务计数显示
• 模态框编辑任务
• 平滑的过渡动画

扩展功能建议

如果想要进一步增强这个应用，可以考虑添加以下功能：

1. 任务优先级：为任务设置优先级（高、中、低）按优先级排序和筛选
2. 为任务设置优先级（高、中、低）
3. 按优先级排序和筛选
4. 任务分类：创建任务分类（如工作、个人、学习等）按分类管理任务
5. 创建任务分类（如工作、个人、学习等）
6. 按分类管理任务
7. 截止日期：为任务设置截止日期显示即将到期的任务
8. 为任务设置截止日期
9. 显示即将到期的任务
10. 搜索功能：添加搜索框，按关键词搜索任务
11. 添加搜索框，按关键词搜索任务
12. 任务统计：添加图表显示任务完成情况统计每日/每周完成的任务数量
13. 添加图表显示任务完成情况
14. 统计每日/每周完成的任务数量
15. 数据导出/导入：支持将任务数据导出为JSON或CSV文件支持从文件导入任务数据
16. 支持将任务数据导出为JSON或CSV文件
17. 支持从文件导入任务数据
18. 主题切换：添加明暗主题切换功能
19. 添加明暗主题切换功能
20. 在线同步：添加用户登录功能将任务数据同步到云端
21. 添加用户登录功能
22. 将任务数据同步到云端

任务优先级：

• 为任务设置优先级（高、中、低）
• 按优先级排序和筛选

任务分类：

• 创建任务分类（如工作、个人、学习等）
• 按分类管理任务

截止日期：

• 为任务设置截止日期
• 显示即将到期的任务

搜索功能：

• 添加搜索框，按关键词搜索任务

任务统计：

• 添加图表显示任务完成情况
• 统计每日/每周完成的任务数量

数据导出/导入：

• 支持将任务数据导出为JSON或CSV文件
• 支持从文件导入任务数据

主题切换：

• 添加明暗主题切换功能

在线同步：

• 添加用户登录功能
• 将任务数据同步到云端

总结与进阶学习资源

总结

本指南全面介绍了HTML DOM Web API的使用，从基础概念到高级应用，帮助您掌握了：

1. DOM基础：理解DOM树结构、节点类型和节点关系。
2. 元素选择与操作：使用各种方法选择和操作HTML元素。
3. 事件处理：处理用户交互，实现动态响应。
4. 样式操作：通过JavaScript动态修改页面样式。
5. 数据交互：处理表单数据，与服务器进行通信。
6. 动态内容创建：使用DOM API创建和修改页面内容。
7. 高级DOM操作：性能优化、MutationObserver和自定义元素。
8. 实战应用：构建了一个完整的响应式任务管理应用。

通过学习这些内容，您已经具备了使用DOM API构建现代化、响应式网页应用的能力。记住，实践是最好的学习方式，继续尝试构建更多项目，不断提升您的技能。

进阶学习资源

1. 官方文档：MDN Web Docs - Document Object Model (DOM)W3C DOM规范
2. MDN Web Docs - Document Object Model (DOM)
3. W3C DOM规范
4. 书籍推荐：《JavaScript高级程序设计》（第4版）- Nicholas C. Zakas《DOM Enlightenment》- Cody Lindley《You Don’t Know JS Yet》- Kyle Simpson
5. 《JavaScript高级程序设计》（第4版）- Nicholas C. Zakas
6. 《DOM Enlightenment》- Cody Lindley
7. 《You Don’t Know JS Yet》- Kyle Simpson
8. 在线课程：freeCodeCamp - JavaScript Algorithms and Data StructuresUdemy - The Complete JavaScript Course 2023Coursera - HTML, CSS, and Javascript for Web Developers
9. freeCodeCamp - JavaScript Algorithms and Data Structures
10. Udemy - The Complete JavaScript Course 2023
11. Coursera - HTML, CSS, and Javascript for Web Developers
12. 实践项目：构建一个交互式待办事项应用开发一个实时天气预报应用创建一个动态数据可视化仪表板实现一个简单的在线文本编辑器
13. 构建一个交互式待办事项应用
14. 开发一个实时天气预报应用
15. 创建一个动态数据可视化仪表板
16. 实现一个简单的在线文本编辑器
17. 社区和论坛：Stack OverflowGitHubReddit - r/javascript前端开发者社区
18. Stack Overflow
19. GitHub
20. Reddit - r/javascript
21. 前端开发者社区
22. 工具和库：jQuery- 简化DOM操作的流行库React- 用于构建用户界面的JavaScript库Vue.js- 渐进式JavaScript框架Angular- 平台和框架，用于构建客户端应用
23. jQuery- 简化DOM操作的流行库
24. React- 用于构建用户界面的JavaScript库
25. Vue.js- 渐进式JavaScript框架
26. Angular- 平台和框架，用于构建客户端应用

官方文档：

• MDN Web Docs - Document Object Model (DOM)
• W3C DOM规范

书籍推荐：

• 《JavaScript高级程序设计》（第4版）- Nicholas C. Zakas
• 《DOM Enlightenment》- Cody Lindley
• 《You Don’t Know JS Yet》- Kyle Simpson

在线课程：

• freeCodeCamp - JavaScript Algorithms and Data Structures
• Udemy - The Complete JavaScript Course 2023
• Coursera - HTML, CSS, and Javascript for Web Developers

实践项目：

• 构建一个交互式待办事项应用
• 开发一个实时天气预报应用
• 创建一个动态数据可视化仪表板
• 实现一个简单的在线文本编辑器

社区和论坛：

• Stack Overflow
• GitHub
• Reddit - r/javascript
• 前端开发者社区

工具和库：

• jQuery- 简化DOM操作的流行库
• React- 用于构建用户界面的JavaScript库
• Vue.js- 渐进式JavaScript框架
• Angular- 平台和框架，用于构建客户端应用

通过不断学习和实践，您将能够更加熟练地运用DOM API，创建出更加复杂和功能丰富的Web应用。祝您在Web开发的道路上取得成功！
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

友情链接

keba
磕巴白菜
别管 别听 就是玩
二次元论坛
二次元论坛
按下F逃离世界！
次元宅社
次元宅社
开放、共创，CHANGE SEKAI！
频道订阅

频道订阅

加入社群

加入社群

联系我们|TG频道|RSS

Powered by Pixtech

© 2025 Pixtech Team.