活动公告

系统通知
通知：关于部分勋章领取条件及购买价格调整的通知
05-18 21:22
系统通知
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！
10-23 09:31
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

深入理解HTML DOM节点创建与插入技术 前端开发必备技能 从基础到实战全面解析动态页面构建方法

这是个蓝孩子 当前离线 威震华夏关云长
SunJu_FaceMall

3万

主题

2860

科技点

3万

积分

白金月票

碾压王

积分
32872

塔罗立华奏
<font color=白金月票" /> 发表于 2025-9-12 16:10:00 | 显示全部楼层 |阅读模式

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

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

x
简介

在现代Web开发中，动态页面构建已成为前端开发的核心技能之一。DOM（文档对象模型）作为HTML和XML文档的编程接口，允许开发者通过JavaScript动态地访问和更新文档的内容、结构和样式。掌握DOM节点的创建与插入技术，不仅能够提升用户体验，还能实现复杂的交互效果和单页应用(SPA)的构建。本文将深入探讨DOM节点创建与插入的各种方法，从基础概念到实战应用，帮助前端开发者全面理解动态页面构建的技术细节。

DOM基础概念

什么是DOM

DOM（Document Object Model）是HTML和XML文档的编程接口，它将文档表示为一个节点树，其中每个节点代表文档的一部分（如元素、属性、文本等）。通过DOM，开发者可以使用JavaScript等脚本语言动态地访问和修改文档的内容、结构和样式。
  2. // 整个文档是一个文档节点
  3. document.documentElement; // 获取<html>元素
  5. // 所有HTML元素都是元素节点
  6. document.getElementById('header'); // 获取id为header的元素
  8. // 元素内的文本是文本节点
  9. const textNode = document.createTextNode('这是一段文本');
复制代码

DOM树结构

DOM将HTML文档表示为树形结构，其中每个节点都有父节点、子节点和兄弟节点的关系。这种树形结构使得开发者可以轻松地遍历和操作文档的各个部分。
  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. 文档片段节点（DocumentFragment Node）：表示文档的轻量级”部分”。
  2. // 检查节点类型
  3. const element = document.createElement('div');
  4. console.log(element.nodeType); // 1 (元素节点)
  6. const text = document.createTextNode('Hello');
  7. console.log(text.nodeType); // 3 (文本节点)
  9. const attr = document.createAttribute('class');
  10. console.log(attr.nodeType); // 2 (属性节点)
  12. console.log(document.nodeType); // 9 (文档节点)
  14. const fragment = document.createDocumentFragment();
  15. console.log(fragment.nodeType); // 11 (文档片段节点)
复制代码

DOM节点创建方法

createElement方法

createElement是创建新元素节点最常用的方法。它接受一个参数，即要创建的元素的标签名，并返回一个新的元素节点。
  2. // 创建一个div元素
  3. const newDiv = document.createElement('div');
  5. // 设置元素属性
  6. newDiv.id = 'myDiv';
  7. newDiv.className = 'container';
  8. newDiv.setAttribute('data-role', 'main');
  10. // 设置样式
  11. newDiv.style.color = 'blue';
  12. newDiv.style.padding = '10px';
  14. // 此时元素已创建但尚未添加到DOM中
  15. console.log(newDiv); // <div id="myDiv" class="container" data-role="main" style="color: blue; padding: 10px;"></div>
复制代码

createTextNode方法

createTextNode方法用于创建新的文本节点。它接受一个参数，即文本内容，并返回一个新的文本节点。
  2. // 创建文本节点
  3. const textContent = document.createTextNode('这是一段文本');
  5. // 创建元素并添加文本节点
  6. const paragraph = document.createElement('p');
  7. paragraph.appendChild(textContent);
  9. // 添加到DOM
  10. document.body.appendChild(paragraph);
  12. // 也可以使用textContent或innerText属性直接设置文本
  13. const anotherParagraph = document.createElement('p');
  14. anotherParagraph.textContent = '这是另一段文本';
  15. document.body.appendChild(anotherParagraph);
复制代码

createDocumentFragment方法

createDocumentFragment方法创建一个文档片段节点，这是一种轻量级的DOM节点，可以包含其他节点，但不会成为实际DOM树的一部分。当需要添加多个节点到DOM时，使用文档片段可以提高性能，因为它只会触发一次重排。
  2. // 创建文档片段
  3. const fragment = document.createDocumentFragment();
  5. // 创建多个列表项
  6. const items = ['苹果', '香蕉', '橙子', '葡萄'];
  7. items.forEach(itemText => {
  8.   const li = document.createElement('li');
  9.   li.textContent = itemText;
  10.   fragment.appendChild(li);
  11. });
  13. // 一次性将所有列表项添加到DOM
  14. const ul = document.createElement('ul');
  15. ul.appendChild(fragment);
  16. document.body.appendChild(ul);
复制代码

cloneNode方法

cloneNode方法用于复制节点，它接受一个布尔参数，表示是否进行深度复制（即复制节点的所有后代节点）。
  2. // 创建原始元素
  3. const originalDiv = document.createElement('div');
  4. originalDiv.className = 'box';
  5. originalDiv.innerHTML = '<p>原始内容</p>';
  7. // 浅拷贝（只复制节点本身，不复制子节点）
  8. const shallowClone = originalDiv.cloneNode(false);
  9. console.log(shallowClone.innerHTML); // "" (空)
  11. // 深拷贝（复制节点及其所有子节点）
  12. const deepClone = originalDiv.cloneNode(true);
  13. console.log(deepClone.innerHTML); // "<p>原始内容</p>"
  15. // 添加到DOM
  16. document.body.appendChild(originalDiv);
  17. document.body.appendChild(deepClone);
复制代码

使用innerHTML和outerHTML

虽然不是直接的节点创建方法，但innerHTML和outerHTML属性可以快速创建和插入HTML结构。
  2. // 创建一个容器
  3. const container = document.createElement('div');
  5. // 使用innerHTML设置内容
  6. container.innerHTML = `
  7.   <h2>标题</h2>
  8.   <p>这是一个段落</p>
  9.   <ul>
  10.     <li>项目1</li>
  11.     <li>项目2</li>
  12.     <li>项目3</li>
  13.   </ul>
  14. `;
  16. // 添加到DOM
  17. document.body.appendChild(container);
  19. // 使用outerHTML替换整个元素
  20. const oldElement = document.getElementById('oldElement');
  21. if (oldElement) {
  22.   oldElement.outerHTML = '<div id="newElement">新元素</div>';
  23. }
复制代码

注意：使用innerHTML和outerHTML时要注意XSS（跨站脚本攻击）风险，特别是当内容来自用户输入时。

DOM节点插入方法

appendChild和insertBefore

appendChild方法将一个节点添加到指定父节点的子节点列表的末尾，而insertBefore方法将一个节点插入到指定子节点之前。
  2. // 创建父元素
  3. const parent = document.createElement('div');
  4. parent.id = 'parent';
  6. // 创建子元素
  7. const firstChild = document.createElement('p');
  8. firstChild.textContent = '第一个子元素';
  9. firstChild.id = 'first';
  11. const secondChild = document.createElement('p');
  12. secondChild.textContent = '第二个子元素';
  13. secondChild.id = 'second';
  15. const thirdChild = document.createElement('p');
  16. thirdChild.textContent = '第三个子元素';
  17. thirdChild.id = 'third';
  19. // 使用appendChild添加子元素
  20. parent.appendChild(firstChild);
  21. parent.appendChild(thirdChild);
  23. // 使用insertBefore在指定节点前插入子元素
  24. parent.insertBefore(secondChild, thirdChild);
  26. // 添加到DOM
  27. document.body.appendChild(parent);
  29. // 结果结构：
  30. // <div id="parent">
  31. //   <p id="first">第一个子元素</p>
  32. //   <p id="second">第二个子元素</p>
  33. //   <p id="third">第三个子元素</p>
  34. // </div>
复制代码

insertAdjacentHTML和insertAdjacentElement

insertAdjacentHTML方法将HTML字符串解析为元素或节点，并将结果插入到DOM中的指定位置。insertAdjacentElement方法则将一个元素节点插入到指定位置。

这两个方法都接受两个参数：位置（字符串）和要插入的内容（HTML字符串或元素节点）。位置可以是以下四个值之一：

• 'beforebegin'：在元素之前插入
• 'afterbegin'：在元素内部的开始处插入
• 'beforeend'：在元素内部的结束处插入
• 'afterend'：在元素之后插入
  2. // 创建目标元素
  3. const target = document.createElement('div');
  4. target.id = 'target';
  5. target.innerHTML = '目标元素';
  6. document.body.appendChild(target);
  8. // 使用insertAdjacentHTML插入HTML字符串
  9. target.insertAdjacentHTML('beforebegin', '<p>在目标元素之前</p>');
  10. target.insertAdjacentHTML('afterbegin', '<p>在目标元素内部的开始处</p>');
  11. target.insertAdjacentHTML('beforeend', '<p>在目标元素内部的结束处</p>');
  12. target.insertAdjacentHTML('afterend', '<p>在目标元素之后</p>');
  14. // 使用insertAdjacentElement插入元素节点
  15. const newElement = document.createElement('div');
  16. newElement.textContent = '新插入的元素';
  17. target.insertAdjacentElement('afterend', newElement);
复制代码

append和prepend方法

append和prepend是较新的DOM方法，分别用于在父元素的子节点列表的末尾和开始处添加节点或字符串。与appendChild不同，这些方法可以同时接受多个参数，并且可以添加字符串作为文本节点。
  2. // 创建父元素
  3. const container = document.createElement('div');
  4. container.id = 'container';
  6. // 创建子元素
  7. const header = document.createElement('h1');
  8. header.textContent = '标题';
  10. const footer = document.createElement('p');
  11. footer.textContent = '页脚';
  13. // 使用prepend在开始处添加子元素
  14. container.prepend(header);
  16. // 使用append在结束处添加子元素
  17. container.append(footer);
  19. // 同时添加多个元素和文本
  20. container.append('一些文本', document.createElement('br'), '更多文本');
  22. // 添加到DOM
  23. document.body.appendChild(container);
  25. // 结果结构：
  26. // <div id="container">
  27. //   <h1>标题</h1>
  28. //   一些文本<br>更多文本
  29. //   <p>页脚</p>
  30. // </div>
复制代码

replaceChild方法

replaceChild方法用于替换父节点中的子节点。它接受两个参数：新节点和要被替换的旧节点。
  2. // 创建父元素和初始子元素
  3. const parent = document.createElement('div');
  4. parent.id = 'parent';
  6. const oldChild = document.createElement('p');
  7. oldChild.textContent = '旧的子元素';
  8. oldChild.id = 'old';
  10. parent.appendChild(oldChild);
  11. document.body.appendChild(parent);
  13. // 创建新元素
  14. const newChild = document.createElement('div');
  15. newChild.textContent = '新的子元素';
  16. newChild.id = 'new';
  18. // 使用replaceChild替换子元素
  19. parent.replaceChild(newChild, oldChild);
  21. // 结果：旧的p元素被新的div元素替换
复制代码

实战案例

动态列表创建

在实际开发中，经常需要根据数据动态创建列表。以下是一个基于数组数据创建有序列表的完整示例。
  2. // 数据源
  3. const products = [
  4.   { id: 1, name: '笔记本电脑', price: 5999 },
  5.   { id: 2, name: '智能手机', price: 3999 },
  6.   { id: 3, name: '平板电脑', price: 2999 },
  7.   { id: 4, name: '智能手表', price: 1299 }
  8. ];
  10. // 创建列表容器
  11. const productList = document.createElement('div');
  12. productList.className = 'product-list';
  14. // 创建标题
  15. const title = document.createElement('h2');
  16. title.textContent = '产品列表';
  17. productList.appendChild(title);
  19. // 创建列表元素
  20. const list = document.createElement('ul');
  21. list.className = 'products';
  23. // 使用文档片段优化性能
  24. const fragment = document.createDocumentFragment();
  26. // 遍历数据创建列表项
  27. products.forEach(product => {
  28.   // 创建列表项
  29.   const listItem = document.createElement('li');
  30.   listItem.className = 'product-item';
  31.   listItem.dataset.id = product.id;
  33.   // 创建产品名称
  34.   const nameElement = document.createElement('h3');
  35.   nameElement.className = 'product-name';
  36.   nameElement.textContent = product.name;
  37.   listItem.appendChild(nameElement);
  39.   // 创建产品价格
  40.   const priceElement = document.createElement('p');
  41.   priceElement.className = 'product-price';
  42.   priceElement.textContent = `价格: ¥${product.price}`;
  43.   listItem.appendChild(priceElement);
  45.   // 创建添加到购物车按钮
  46.   const addButton = document.createElement('button');
  47.   addButton.className = 'add-to-cart';
  48.   addButton.textContent = '添加到购物车';
  49.   
  50.   // 添加点击事件
  51.   addButton.addEventListener('click', function() {
  52.     alert(`已添加 ${product.name} 到购物车`);
  53.   });
  54.   
  55.   listItem.appendChild(addButton);
  57.   // 将列表项添加到文档片段
  58.   fragment.appendChild(listItem);
  59. });
  61. // 将所有列表项一次性添加到列表
  62. list.appendChild(fragment);
  64. // 将列表添加到容器
  65. productList.appendChild(list);
  67. // 将整个产品列表添加到页面
  68. document.body.appendChild(productList);
  70. // 添加样式
  71. const style = document.createElement('style');
  72. style.textContent = `
  73.   .product-list {
  74.     font-family: Arial, sans-serif;
  75.     max-width: 600px;
  76.     margin: 0 auto;
  77.     padding: 20px;
  78.   }
  79.   .products {
  80.     list-style: none;
  81.     padding: 0;
  82.   }
  83.   .product-item {
  84.     border: 1px solid #ddd;
  85.     border-radius: 5px;
  86.     padding: 15px;
  87.     margin-bottom: 10px;
  88.     background-color: #f9f9f9;
  89.   }
  90.   .product-name {
  91.     margin-top: 0;
  92.     color: #333;
  93.   }
  94.   .product-price {
  95.     color: #e44d26;
  96.     font-weight: bold;
  97.   }
  98.   .add-to-cart {
  99.     background-color: #4CAF50;
  100.     color: white;
  101.     border: none;
  102.     padding: 8px 12px;
  103.     border-radius: 4px;
  104.     cursor: pointer;
  105.   }
  106.   .add-to-cart:hover {
  107.     background-color: #45a049;
  108.   }
  109. `;
  110. document.head.appendChild(style);
复制代码

表单动态生成

动态生成表单是另一个常见的需求，特别是在需要根据用户选择或后端数据动态调整表单字段时。
  2. // 表单字段配置
  3. const formFields = [
  4.   {
  5.     type: 'text',
  6.     name: 'username',
  7.     label: '用户名',
  8.     required: true,
  9.     placeholder: '请输入用户名'
  10.   },
  11.   {
  12.     type: 'email',
  13.     name: 'email',
  14.     label: '电子邮箱',
  15.     required: true,
  16.     placeholder: '请输入电子邮箱'
  17.   },
  18.   {
  19.     type: 'password',
  20.     name: 'password',
  21.     label: '密码',
  22.     required: true,
  23.     placeholder: '请输入密码'
  24.   },
  25.   {
  26.     type: 'select',
  27.     name: 'country',
  28.     label: '国家',
  29.     options: [
  30.       { value: '', text: '请选择国家' },
  31.       { value: 'cn', text: '中国' },
  32.       { value: 'us', text: '美国' },
  33.       { value: 'uk', text: '英国' },
  34.       { value: 'jp', text: '日本' }
  35.     ],
  36.     required: true
  37.   },
  38.   {
  39.     type: 'checkbox',
  40.     name: 'interests',
  41.     label: '兴趣爱好',
  42.     options: [
  43.       { value: 'sports', text: '运动' },
  44.       { value: 'music', text: '音乐' },
  45.       { value: 'reading', text: '阅读' },
  46.       { value: 'travel', text: '旅行' }
  47.     ]
  48.   },
  49.   {
  50.     type: 'radio',
  51.     name: 'gender',
  52.     label: '性别',
  53.     options: [
  54.       { value: 'male', text: '男' },
  55.       { value: 'female', text: '女' },
  56.       { value: 'other', text: '其他' }
  57.     ],
  58.     required: true
  59.   },
  60.   {
  61.     type: 'textarea',
  62.     name: 'bio',
  63.     label: '个人简介',
  64.     placeholder: '请简单介绍一下自己',
  65.     rows: 4
  66.   }
  67. ];
  69. // 创建表单容器
  70. const formContainer = document.createElement('div');
  71. formContainer.className = 'form-container';
  73. // 创建表单标题
  74. const formTitle = document.createElement('h2');
  75. formTitle.textContent = '用户注册表单';
  76. formContainer.appendChild(formTitle);
  78. // 创建表单元素
  79. const form = document.createElement('form');
  80. form.id = 'registration-form';
  82. // 遍历表单字段配置创建表单控件
  83. formFields.forEach(field => {
  84.   // 创建字段容器
  85.   const fieldContainer = document.createElement('div');
  86.   fieldContainer.className = 'form-group';
  88.   // 创建标签
  89.   const label = document.createElement('label');
  90.   label.textContent = field.label;
  91.   
  92.   // 如果是必填字段，添加必填标记
  93.   if (field.required) {
  94.     const requiredMarker = document.createElement('span');
  95.     requiredMarker.className = 'required';
  96.     requiredMarker.textContent = ' *';
  97.     label.appendChild(requiredMarker);
  98.   }
  99.   
  100.   fieldContainer.appendChild(label);
  102.   // 根据字段类型创建不同的输入控件
  103.   let input;
  104.   
  105.   switch (field.type) {
  106.     case 'text':
  107.     case 'email':
  108.     case 'password':
  109.       input = document.createElement('input');
  110.       input.type = field.type;
  111.       input.name = field.name;
  112.       input.id = field.name;
  113.       
  114.       if (field.placeholder) {
  115.         input.placeholder = field.placeholder;
  116.       }
  117.       
  118.       if (field.required) {
  119.         input.required = true;
  120.       }
  121.       
  122.       fieldContainer.appendChild(input);
  123.       break;
  124.       
  125.     case 'textarea':
  126.       input = document.createElement('textarea');
  127.       input.name = field.name;
  128.       input.id = field.name;
  129.       
  130.       if (field.placeholder) {
  131.         input.placeholder = field.placeholder;
  132.       }
  133.       
  134.       if (field.rows) {
  135.         input.rows = field.rows;
  136.       }
  137.       
  138.       fieldContainer.appendChild(input);
  139.       break;
  140.       
  141.     case 'select':
  142.       input = document.createElement('select');
  143.       input.name = field.name;
  144.       input.id = field.name;
  145.       
  146.       if (field.required) {
  147.         input.required = true;
  148.       }
  149.       
  150.       // 添加选项
  151.       field.options.forEach(option => {
  152.         const optionElement = document.createElement('option');
  153.         optionElement.value = option.value;
  154.         optionElement.textContent = option.text;
  155.         input.appendChild(optionElement);
  156.       });
  157.       
  158.       fieldContainer.appendChild(input);
  159.       break;
  160.       
  161.     case 'checkbox':
  162.     case 'radio':
  163.       // 创建选项容器
  164.       const optionsContainer = document.createElement('div');
  165.       optionsContainer.className = 'options-container';
  166.       
  167.       // 创建每个选项
  168.       field.options.forEach(option => {
  169.         const optionContainer = document.createElement('div');
  170.         optionContainer.className = 'option-item';
  171.         
  172.         const optionInput = document.createElement('input');
  173.         optionInput.type = field.type;
  174.         optionInput.name = field.name;
  175.         optionInput.id = `${field.name}-${option.value}`;
  176.         optionInput.value = option.value;
  177.         
  178.         const optionLabel = document.createElement('label');
  179.         optionLabel.htmlFor = `${field.name}-${option.value}`;
  180.         optionLabel.textContent = option.text;
  181.         
  182.         optionContainer.appendChild(optionInput);
  183.         optionContainer.appendChild(optionLabel);
  184.         optionsContainer.appendChild(optionContainer);
  185.       });
  186.       
  187.       fieldContainer.appendChild(optionsContainer);
  188.       break;
  189.   }
  191.   // 添加错误消息容器
  192.   const errorContainer = document.createElement('div');
  193.   errorContainer.className = 'error-message';
  194.   errorContainer.id = `${field.name}-error`;
  195.   fieldContainer.appendChild(errorContainer);
  197.   form.appendChild(fieldContainer);
  198. });
  200. // 创建提交按钮
  201. const submitButton = document.createElement('button');
  202. submitButton.type = 'submit';
  203. submitButton.textContent = '提交注册';
  204. form.appendChild(submitButton);
  206. // 添加表单到容器
  207. formContainer.appendChild(form);
  209. // 添加到DOM
  210. document.body.appendChild(formContainer);
  212. // 添加表单验证和提交处理
  213. form.addEventListener('submit', function(event) {
  214.   event.preventDefault();
  215.   
  216.   let isValid = true;
  217.   
  218.   // 验证每个字段
  219.   formFields.forEach(field => {
  220.     if (field.required) {
  221.       let fieldValue;
  222.       const errorContainer = document.getElementById(`${field.name}-error`);
  223.       
  224.       if (field.type === 'checkbox' || field.type === 'radio') {
  225.         // 对于复选框和单选按钮，检查是否有选中项
  226.         const inputs = form.querySelectorAll(`input[name="${field.name}"]:checked`);
  227.         fieldValue = inputs.length > 0;
  228.         
  229.         if (!fieldValue) {
  230.           errorContainer.textContent = `请选择${field.label}`;
  231.           isValid = false;
  232.         } else {
  233.           errorContainer.textContent = '';
  234.         }
  235.       } else {
  236.         // 对于其他输入类型，检查值是否为空
  237.         const input = form.querySelector(`[name="${field.name}"]`);
  238.         fieldValue = input.value.trim();
  239.         
  240.         if (!fieldValue) {
  241.           errorContainer.textContent = `${field.label}不能为空`;
  242.           isValid = false;
  243.         } else {
  244.           // 特定验证
  245.           if (field.type === 'email' && !validateEmail(fieldValue)) {
  246.             errorContainer.textContent = '请输入有效的电子邮箱地址';
  247.             isValid = false;
  248.           } else {
  249.             errorContainer.textContent = '';
  250.           }
  251.         }
  252.       }
  253.     }
  254.   });
  255.   
  256.   if (isValid) {
  257.     // 收集表单数据
  258.     const formData = new FormData(form);
  259.     const data = {};
  260.    
  261.     for (let [key, value] of formData.entries()) {
  262.       if (data[key]) {
  263.         // 如果键已存在，转换为数组
  264.         if (!Array.isArray(data[key])) {
  265.           data[key] = [data[key]];
  266.         }
  267.         data[key].push(value);
  268.       } else {
  269.         data[key] = value;
  270.       }
  271.     }
  272.    
  273.     // 显示成功消息
  274.     const successMessage = document.createElement('div');
  275.     successMessage.className = 'success-message';
  276.     successMessage.textContent = '表单提交成功！数据已收集。';
  277.     formContainer.appendChild(successMessage);
  278.    
  279.     // 输出收集的数据（实际应用中，这里可能是AJAX请求）
  280.     console.log('收集的表单数据:', data);
  281.    
  282.     // 重置表单
  283.     form.reset();
  284.    
  285.     // 3秒后移除成功消息
  286.     setTimeout(() => {
  287.       successMessage.remove();
  288.     }, 3000);
  289.   }
  290. });
  292. // 邮箱验证函数
  293. function validateEmail(email) {
  294.   const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  295.   return re.test(email);
  296. }
  298. // 添加样式
  299. const formStyle = document.createElement('style');
  300. formStyle.textContent = `
  301.   .form-container {
  302.     max-width: 600px;
  303.     margin: 0 auto;
  304.     padding: 20px;
  305.     font-family: Arial, sans-serif;
  306.   }
  307.   .form-group {
  308.     margin-bottom: 15px;
  309.   }
  310.   label {
  311.     display: block;
  312.     margin-bottom: 5px;
  313.     font-weight: bold;
  314.   }
  315.   .required {
  316.     color: red;
  317.   }
  318.   input[type="text"],
  319.   input[type="email"],
  320.   input[type="password"],
  321.   select,
  322.   textarea {
  323.     width: 100%;
  324.     padding: 8px;
  325.     border: 1px solid #ddd;
  326.     border-radius: 4px;
  327.     box-sizing: border-box;
  328.   }
  329.   .options-container {
  330.     margin-top: 5px;
  331.   }
  332.   .option-item {
  333.     margin-bottom: 5px;
  334.   }
  335.   input[type="checkbox"],
  336.   input[type="radio"] {
  337.     margin-right: 5px;
  338.   }
  339.   button {
  340.     background-color: #4CAF50;
  341.     color: white;
  342.     border: none;
  343.     padding: 10px 15px;
  344.     border-radius: 4px;
  345.     cursor: pointer;
  346.     font-size: 16px;
  347.   }
  348.   button:hover {
  349.     background-color: #45a049;
  350.   }
  351.   .error-message {
  352.     color: red;
  353.     font-size: 14px;
  354.     margin-top: 5px;
  355.   }
  356.   .success-message {
  357.     background-color: #dff0d8;
  358.     color: #3c763d;
  359.     padding: 10px;
  360.     border-radius: 4px;
  361.     margin-top: 20px;
  362.   }
  363. `;
  364. document.head.appendChild(formStyle);
复制代码

模态框动态创建

模态框（Modal）是现代Web应用中常见的UI组件，用于显示重要信息或需要用户交互的内容。下面是一个动态创建模态框的完整示例。
  2. // 创建模态框的函数
  3. function createModal(options) {
  4.   // 设置默认选项
  5.   const defaultOptions = {
  6.     title: '提示',
  7.     content: '',
  8.     showFooter: true,
  9.     showCloseButton: true,
  10.     closeOnOverlayClick: true,
  11.     buttons: [
  12.       {
  13.         text: '确定',
  14.         class: 'btn-primary',
  15.         action: function() {
  16.           closeModal(modalElement);
  17.         }
  18.       }
  19.     ]
  20.   };
  21.   
  22.   // 合并选项
  23.   options = Object.assign({}, defaultOptions, options);
  24.   
  25.   // 创建模态框元素
  26.   const modalElement = document.createElement('div');
  27.   modalElement.className = 'modal';
  28.   modalElement.style.display = 'none';
  29.   
  30.   // 创建遮罩层
  31.   const overlay = document.createElement('div');
  32.   overlay.className = 'modal-overlay';
  33.   
  34.   // 创建模态框内容容器
  35.   const modalContainer = document.createElement('div');
  36.   modalContainer.className = 'modal-container';
  37.   
  38.   // 创建头部
  39.   const header = document.createElement('div');
  40.   header.className = 'modal-header';
  41.   
  42.   const title = document.createElement('h3');
  43.   title.className = 'modal-title';
  44.   title.textContent = options.title;
  45.   header.appendChild(title);
  46.   
  47.   // 添加关闭按钮
  48.   if (options.showCloseButton) {
  49.     const closeButton = document.createElement('button');
  50.     closeButton.className = 'modal-close';
  51.     closeButton.innerHTML = '&times;';
  52.     closeButton.addEventListener('click', function() {
  53.       closeModal(modalElement);
  54.     });
  55.     header.appendChild(closeButton);
  56.   }
  57.   
  58.   modalContainer.appendChild(header);
  59.   
  60.   // 创建内容区域
  61.   const content = document.createElement('div');
  62.   content.className = 'modal-content';
  63.   
  64.   // 如果内容是字符串，直接设置
  65.   if (typeof options.content === 'string') {
  66.     content.innerHTML = options.content;
  67.   }
  68.   // 如果内容是DOM元素，添加到内容区域
  69.   else if (options.content instanceof HTMLElement) {
  70.     content.appendChild(options.content);
  71.   }
  72.   
  73.   modalContainer.appendChild(content);
  74.   
  75.   // 创建底部按钮区域
  76.   if (options.showFooter) {
  77.     const footer = document.createElement('div');
  78.     footer.className = 'modal-footer';
  79.    
  80.     // 添加按钮
  81.     options.buttons.forEach(button => {
  82.       const buttonElement = document.createElement('button');
  83.       buttonElement.className = button.class || 'btn-default';
  84.       buttonElement.textContent = button.text;
  85.       
  86.       buttonElement.addEventListener('click', function() {
  87.         if (button.action && typeof button.action === 'function') {
  88.           button.action();
  89.         }
  90.       });
  91.       
  92.       footer.appendChild(buttonElement);
  93.     });
  94.    
  95.     modalContainer.appendChild(footer);
  96.   }
  97.   
  98.   // 组装模态框
  99.   modalElement.appendChild(overlay);
  100.   modalElement.appendChild(modalContainer);
  101.   
  102.   // 点击遮罩层关闭模态框
  103.   if (options.closeOnOverlayClick) {
  104.     overlay.addEventListener('click', function() {
  105.       closeModal(modalElement);
  106.     });
  107.   }
  108.   
  109.   // 阻止点击内容区域时关闭模态框
  110.   modalContainer.addEventListener('click', function(event) {
  111.     event.stopPropagation();
  112.   });
  113.   
  114.   // 添加到DOM
  115.   document.body.appendChild(modalElement);
  116.   
  117.   return modalElement;
  118. }
  120. // 打开模态框的函数
  121. function openModal(modalElement) {
  122.   modalElement.style.display = 'block';
  123.   
  124.   // 添加动画类
  125.   setTimeout(() => {
  126.     modalElement.classList.add('show');
  127.   }, 10);
  128.   
  129.   // 禁止背景滚动
  130.   document.body.style.overflow = 'hidden';
  131. }
  133. // 关闭模态框的函数
  134. function closeModal(modalElement) {
  135.   modalElement.classList.remove('show');
  136.   
  137.   // 动画结束后隐藏模态框
  138.   setTimeout(() => {
  139.     modalElement.style.display = 'none';
  140.    
  141.     // 恢复背景滚动
  142.     document.body.style.overflow = '';
  143.   }, 300);
  144. }
  146. // 创建示例按钮
  147. const showModalButton = document.createElement('button');
  148. showModalButton.textContent = '显示模态框';
  149. showModalButton.className = 'btn-demo';
  150. showModalButton.addEventListener('click', function() {
  151.   // 创建模态框内容
  152.   const modalContent = document.createElement('div');
  153.   modalContent.innerHTML = `
  154.     <p>这是一个动态创建的模态框示例。</p>
  155.     <p>您可以通过JavaScript动态创建各种类型的模态框，包括：</p>
  156.     <ul>
  157.       <li>提示信息</li>
  158.       <li>确认对话框</li>
  159.       <li>表单输入</li>
  160.       <li>图片预览</li>
  161.       <li>等等...</li>
  162.     </ul>
  163.   `;
  164.   
  165.   // 创建模态框
  166.   const modal = createModal({
  167.     title: '模态框示例',
  168.     content: modalContent,
  169.     buttons: [
  170.       {
  171.         text: '取消',
  172.         class: 'btn-secondary',
  173.         action: function() {
  174.           closeModal(modal);
  175.         }
  176.       },
  177.       {
  178.         text: '确定',
  179.         class: 'btn-primary',
  180.         action: function() {
  181.           alert('您点击了确定按钮！');
  182.           closeModal(modal);
  183.         }
  184.       }
  185.     ]
  186.   });
  187.   
  188.   // 显示模态框
  189.   openModal(modal);
  190. });
  192. document.body.appendChild(showModalButton);
  194. // 创建表单模态框示例
  195. const showFormModalButton = document.createElement('button');
  196. showFormModalButton.textContent = '显示表单模态框';
  197. showFormModalButton.className = 'btn-demo';
  198. showFormModalButton.addEventListener('click', function() {
  199.   // 创建表单
  200.   const form = document.createElement('form');
  201.   form.id = 'modal-form';
  202.   
  203.   // 用户名字段
  204.   const usernameGroup = document.createElement('div');
  205.   usernameGroup.className = 'form-group';
  206.   
  207.   const usernameLabel = document.createElement('label');
  208.   usernameLabel.textContent = '用户名';
  209.   usernameGroup.appendChild(usernameLabel);
  210.   
  211.   const usernameInput = document.createElement('input');
  212.   usernameInput.type = 'text';
  213.   usernameInput.name = 'username';
  214.   usernameInput.required = true;
  215.   usernameGroup.appendChild(usernameInput);
  216.   
  217.   form.appendChild(usernameGroup);
  218.   
  219.   // 邮箱字段
  220.   const emailGroup = document.createElement('div');
  221.   emailGroup.className = 'form-group';
  222.   
  223.   const emailLabel = document.createElement('label');
  224.   emailLabel.textContent = '邮箱';
  225.   emailGroup.appendChild(emailLabel);
  226.   
  227.   const emailInput = document.createElement('input');
  228.   emailInput.type = 'email';
  229.   emailInput.name = 'email';
  230.   emailInput.required = true;
  231.   emailGroup.appendChild(emailInput);
  232.   
  233.   form.appendChild(emailGroup);
  234.   
  235.   // 创建模态框
  236.   const modal = createModal({
  237.     title: '用户信息',
  238.     content: form,
  239.     buttons: [
  240.       {
  241.         text: '取消',
  242.         class: 'btn-secondary',
  243.         action: function() {
  244.           closeModal(modal);
  245.         }
  246.       },
  247.       {
  248.         text: '提交',
  249.         class: 'btn-primary',
  250.         action: function() {
  251.           // 验证表单
  252.           if (form.checkValidity()) {
  253.             const formData = new FormData(form);
  254.             const data = Object.fromEntries(formData);
  255.             console.log('表单数据:', data);
  256.             alert('表单提交成功！');
  257.             closeModal(modal);
  258.           } else {
  259.             // 触发浏览器验证
  260.             form.reportValidity();
  261.           }
  262.         }
  263.       }
  264.     ]
  265.   });
  266.   
  267.   // 显示模态框
  268.   openModal(modal);
  269. });
  271. document.body.appendChild(showFormModalButton);
  273. // 添加样式
  274. const modalStyle = document.createElement('style');
  275. modalStyle.textContent = `
  276.   .btn-demo {
  277.     margin: 10px;
  278.     padding: 10px 15px;
  279.     background-color: #4CAF50;
  280.     color: white;
  281.     border: none;
  282.     border-radius: 4px;
  283.     cursor: pointer;
  284.   }
  285.   .btn-demo:hover {
  286.     background-color: #45a049;
  287.   }
  288.   .modal {
  289.     position: fixed;
  290.     top: 0;
  291.     left: 0;
  292.     width: 100%;
  293.     height: 100%;
  294.     z-index: 1000;
  295.     opacity: 0;
  296.     transition: opacity 0.3s ease;
  297.   }
  298.   .modal.show {
  299.     opacity: 1;
  300.   }
  301.   .modal-overlay {
  302.     position: absolute;
  303.     top: 0;
  304.     left: 0;
  305.     width: 100%;
  306.     height: 100%;
  307.     background-color: rgba(0, 0, 0, 0.5);
  308.   }
  309.   .modal-container {
  310.     position: relative;
  311.     background-color: white;
  312.     width: 90%;
  313.     max-width: 600px;
  314.     margin: 50px auto;
  315.     border-radius: 5px;
  316.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  317.     transform: translateY(-20px);
  318.     transition: transform 0.3s ease;
  319.   }
  320.   .modal.show .modal-container {
  321.     transform: translateY(0);
  322.   }
  323.   .modal-header {
  324.     padding: 15px 20px;
  325.     border-bottom: 1px solid #eee;
  326.     display: flex;
  327.     justify-content: space-between;
  328.     align-items: center;
  329.   }
  330.   .modal-title {
  331.     margin: 0;
  332.     font-size: 18px;
  333.   }
  334.   .modal-close {
  335.     background: none;
  336.     border: none;
  337.     font-size: 24px;
  338.     cursor: pointer;
  339.     color: #999;
  340.   }
  341.   .modal-close:hover {
  342.     color: #333;
  343.   }
  344.   .modal-content {
  345.     padding: 20px;
  346.   }
  347.   .modal-footer {
  348.     padding: 15px 20px;
  349.     border-top: 1px solid #eee;
  350.     display: flex;
  351.     justify-content: flex-end;
  352.     gap: 10px;
  353.   }
  354.   .btn-primary {
  355.     background-color: #007bff;
  356.     color: white;
  357.     border: none;
  358.     padding: 8px 16px;
  359.     border-radius: 4px;
  360.     cursor: pointer;
  361.   }
  362.   .btn-primary:hover {
  363.     background-color: #0069d9;
  364.   }
  365.   .btn-secondary {
  366.     background-color: #6c757d;
  367.     color: white;
  368.     border: none;
  369.     padding: 8px 16px;
  370.     border-radius: 4px;
  371.     cursor: pointer;
  372.   }
  373.   .btn-secondary:hover {
  374.     background-color: #5a6268;
  375.   }
  376.   .form-group {
  377.     margin-bottom: 15px;
  378.   }
  379.   .form-group label {
  380.     display: block;
  381.     margin-bottom: 5px;
  382.   }
  383.   .form-group input {
  384.     width: 100%;
  385.     padding: 8px;
  386.     border: 1px solid #ddd;
  387.     border-radius: 4px;
  388.     box-sizing: border-box;
  389.   }
  390. `;
  391. document.head.appendChild(modalStyle);
复制代码

无限滚动加载

无限滚动是一种常见的网页内容加载方式，当用户滚动到页面底部时，自动加载更多内容。下面是一个实现无限滚动加载的完整示例。
  2. // 模拟数据生成函数
  3. function generateItems(start, count) {
  4.   const items = [];
  5.   for (let i = start; i < start + count; i++) {
  6.     items.push({
  7.       id: i,
  8.       title: `项目 ${i}`,
  9.       content: `这是项目 ${i} 的内容描述。这里可以包含更多的文本内容来模拟真实的项目卡片。`,
  10.       image: `https://picsum.photos/seed/item${i}/300/200.jpg`
  11.     });
  12.   }
  13.   return items;
  14. }
  16. // 创建无限滚动容器
  17. const container = document.createElement('div');
  18. container.className = 'infinite-scroll-container';
  20. // 创建标题
  21. const title = document.createElement('h2');
  22. title.textContent = '无限滚动加载示例';
  23. container.appendChild(title);
  25. // 创建内容区域
  26. const contentArea = document.createElement('div');
  27. contentArea.className = 'content-area';
  29. // 创建加载指示器
  30. const loadingIndicator = document.createElement('div');
  31. loadingIndicator.className = 'loading-indicator';
  32. loadingIndicator.textContent = '加载中...';
  33. loadingIndicator.style.display = 'none';
  35. // 添加到容器
  36. container.appendChild(contentArea);
  37. container.appendChild(loadingIndicator);
  39. // 添加到DOM
  40. document.body.appendChild(container);
  42. // 状态变量
  43. let page = 1;
  44. const itemsPerPage = 10;
  45. let isLoading = false;
  46. let hasMoreItems = true;
  48. // 创建项目卡片函数
  49. function createItemCard(item) {
  50.   const card = document.createElement('div');
  51.   card.className = 'item-card';
  52.   
  53.   const image = document.createElement('img');
  54.   image.src = item.image;
  55.   image.alt = item.title;
  56.   card.appendChild(image);
  57.   
  58.   const cardContent = document.createElement('div');
  59.   cardContent.className = 'card-content';
  60.   
  61.   const cardTitle = document.createElement('h3');
  62.   cardTitle.textContent = item.title;
  63.   cardContent.appendChild(cardTitle);
  64.   
  65.   const cardText = document.createElement('p');
  66.   cardText.textContent = item.content;
  67.   cardContent.appendChild(cardText);
  68.   
  69.   card.appendChild(cardContent);
  70.   
  71.   return card;
  72. }
  74. // 加载更多项目函数
  75. function loadMoreItems() {
  76.   if (isLoading || !hasMoreItems) return;
  77.   
  78.   isLoading = true;
  79.   loadingIndicator.style.display = 'block';
  80.   
  81.   // 模拟网络请求延迟
  82.   setTimeout(() => {
  83.     // 生成新项目
  84.     const newItems = generateItems((page - 1) * itemsPerPage + 1, itemsPerPage);
  85.    
  86.     // 创建文档片段以优化性能
  87.     const fragment = document.createDocumentFragment();
  88.    
  89.     // 添加新项目到内容区域
  90.     newItems.forEach(item => {
  91.       const card = createItemCard(item);
  92.       fragment.appendChild(card);
  93.     });
  94.    
  95.     contentArea.appendChild(fragment);
  96.    
  97.     // 更新状态
  98.     page++;
  99.     isLoading = false;
  100.     loadingIndicator.style.display = 'none';
  101.    
  102.     // 模拟数据有限（最多50个项目）
  103.     if (page * itemsPerPage > 50) {
  104.       hasMoreItems = false;
  105.       
  106.       // 显示没有更多内容的消息
  107.       const endMessage = document.createElement('div');
  108.       endMessage.className = 'end-message';
  109.       endMessage.textContent = '没有更多内容了';
  110.       container.appendChild(endMessage);
  111.     }
  112.   }, 1000); // 模拟1秒的加载延迟
  113. }
  115. // 初始加载
  116. loadMoreItems();
  118. // 滚动事件处理函数
  119. function handleScroll() {
  120.   // 计算滚动位置
  121.   const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  122.   const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  123.   const clientHeight = document.documentElement.clientHeight || window.innerHeight;
  124.   
  125.   // 当滚动到距离底部200px时加载更多内容
  126.   if (scrollTop + clientHeight >= scrollHeight - 200) {
  127.     loadMoreItems();
  128.   }
  129. }
  131. // 添加滚动事件监听器
  132. window.addEventListener('scroll', handleScroll);
  134. // 添加样式
  135. const scrollStyle = document.createElement('style');
  136. scrollStyle.textContent = `
  137.   .infinite-scroll-container {
  138.     max-width: 800px;
  139.     margin: 0 auto;
  140.     padding: 20px;
  141.     font-family: Arial, sans-serif;
  142.   }
  143.   .content-area {
  144.     display: grid;
  145.     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  146.     gap: 20px;
  147.   }
  148.   .item-card {
  149.     border: 1px solid #ddd;
  150.     border-radius: 8px;
  151.     overflow: hidden;
  152.     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  153.     transition: transform 0.3s ease;
  154.   }
  155.   .item-card:hover {
  156.     transform: translateY(-5px);
  157.     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  158.   }
  159.   .item-card img {
  160.     width: 100%;
  161.     height: 200px;
  162.     object-fit: cover;
  163.   }
  164.   .card-content {
  165.     padding: 15px;
  166.   }
  167.   .card-content h3 {
  168.     margin-top: 0;
  169.     color: #333;
  170.   }
  171.   .card-content p {
  172.     color: #666;
  173.     line-height: 1.5;
  174.   }
  175.   .loading-indicator {
  176.     text-align: center;
  177.     padding: 20px;
  178.     color: #666;
  179.     font-style: italic;
  180.   }
  181.   .end-message {
  182.     text-align: center;
  183.     padding: 20px;
  184.     color: #999;
  185.     font-style: italic;
  186.   }
  187. `;
  188. document.head.appendChild(scrollStyle);
复制代码

性能优化

DocumentFragment的使用

DocumentFragment是一个轻量级的DOM节点，可以包含其他节点，但不会成为实际DOM树的一部分。当需要添加多个节点到DOM时，使用DocumentFragment可以显著提高性能，因为它只会触发一次重排。
  2. // 不使用DocumentFragment的方式（性能较差）
  3. function addItemsWithoutFragment(container, items) {
  4.   items.forEach(item => {
  5.     const li = document.createElement('li');
  6.     li.textContent = item;
  7.     container.appendChild(li); // 每次appendChild都会触发重排
  8.   });
  9. }
  11. // 使用DocumentFragment的方式（性能更好）
  12. function addItemsWithFragment(container, items) {
  13.   const fragment = document.createDocumentFragment();
  14.   
  15.   items.forEach(item => {
  16.     const li = document.createElement('li');
  17.     li.textContent = item;
  18.     fragment.appendChild(li); // 在内存中操作，不会触发重排
  19.   });
  20.   
  21.   container.appendChild(fragment); // 只触发一次重排
  22. }
  24. // 性能测试
  25. function testPerformance() {
  26.   const container1 = document.createElement('ul');
  27.   document.body.appendChild(container1);
  28.   
  29.   const container2 = document.createElement('ul');
  30.   document.body.appendChild(container2);
  31.   
  32.   const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
  33.   
  34.   // 测试不使用DocumentFragment
  35.   console.time('Without Fragment');
  36.   addItemsWithoutFragment(container1, items);
  37.   console.timeEnd('Without Fragment');
  38.   
  39.   // 测试使用DocumentFragment
  40.   console.time('With Fragment');
  41.   addItemsWithFragment(container2, items);
  42.   console.timeEnd('With Fragment');
  43. }
  45. // 运行测试
  46. testPerformance();
复制代码

批量操作优化

当需要对DOM进行多次修改时，尽量将这些操作批量进行，以减少重排和重绘的次数。
  2. // 不好的做法 - 多次单独操作
  3. function badPractice() {
  4.   const container = document.getElementById('container');
  5.   
  6.   // 多次修改样式，每次都会触发重排
  7.   container.style.padding = '10px';
  8.   container.style.margin = '20px';
  9.   container.style.border = '1px solid #ccc';
  10.   
  11.   // 多次修改类名，每次都会触发重排
  12.   container.classList.add('active');
  13.   container.classList.remove('inactive');
  14.   container.classList.add('highlight');
  15.   
  16.   // 多次修改内容，每次都会触发重排
  17.   container.innerHTML = '<p>第一步</p>';
  18.   container.innerHTML += '<p>第二步</p>';
  19.   container.innerHTML += '<p>第三步</p>';
  20. }
  22. // 好的做法 - 批量操作
  23. function goodPractice() {
  24.   const container = document.getElementById('container');
  25.   
  26.   // 使用CSS类一次性应用多个样式
  27.   container.className = 'styled-container active highlight';
  28.   
  29.   // 一次性构建完整内容
  30.   const content = `
  31.     <p>第一步</p>
  32.     <p>第二步</p>
  33.     <p>第三步</p>
  34.   `;
  35.   container.innerHTML = content;
  36.   
  37.   // 或者使用DocumentFragment
  38.   const fragment = document.createDocumentFragment();
  39.   
  40.   const p1 = document.createElement('p');
  41.   p1.textContent = '第一步';
  42.   fragment.appendChild(p1);
  43.   
  44.   const p2 = document.createElement('p');
  45.   p2.textContent = '第二步';
  46.   fragment.appendChild(p2);
  47.   
  48.   const p3 = document.createElement('p');
  49.   p3.textContent = '第三步';
  50.   fragment.appendChild(p3);
  51.   
  52.   container.appendChild(fragment);
  53. }
  55. // 添加样式
  56. const style = document.createElement('style');
  57. style.textContent = `
  58.   .styled-container {
  59.     padding: 10px;
  60.     margin: 20px;
  61.     border: 1px solid #ccc;
  62.   }
  63.   .active {
  64.     background-color: #f0f0f0;
  65.   }
  66.   .highlight {
  67.     box-shadow: 0 0 10px rgba(0,0,0,0.1);
  68.   }
  69. `;
  70. document.head.appendChild(style);
复制代码

重排与重绘优化

理解浏览器的重排（reflow）和重绘（repaint）机制对于优化DOM操作性能至关重要。重排是指浏览器重新计算元素的几何属性（位置、大小等），而重绘是指浏览器重新绘制元素的视觉效果。重排比重绘更消耗性能。
  2. // 创建测试容器
  3. const testContainer = document.createElement('div');
  4. testContainer.id = 'test-container';
  5. testContainer.style.padding = '20px';
  6. document.body.appendChild(testContainer);
  8. // 创建测试元素
  9. function createTestElements(count) {
  10.   const fragment = document.createDocumentFragment();
  11.   
  12.   for (let i = 0; i < count; i++) {
  13.     const div = document.createElement('div');
  14.     div.className = 'test-item';
  15.     div.textContent = `Item ${i}`;
  16.     fragment.appendChild(div);
  17.   }
  18.   
  19.   testContainer.appendChild(fragment);
  20. }
  22. createTestElements(100);
  24. // 不好的做法 - 导致多次重排
  25. function badReflowExample() {
  26.   const items = document.querySelectorAll('.test-item');
  27.   
  28.   items.forEach(item => {
  29.     // 每次修改样式都会触发重排
  30.     item.style.width = '200px';
  31.     item.style.height = '50px';
  32.     item.style.margin = '5px';
  33.     item.style.backgroundColor = '#f0f0f0';
  34.   });
  35. }
  37. // 好的做法 - 减少重排次数
  38. function goodReflowExample() {
  39.   const items = document.querySelectorAll('.test-item');
  40.   
  41.   // 方法1: 使用CSS类一次性应用多个样式
  42.   items.forEach(item => {
  43.     item.className = 'test-item styled';
  44.   });
  45.   
  46.   // 方法2: 批量读取，然后批量写入
  47.   // 先读取所有需要的信息
  48.   const itemData = Array.from(items).map(item => ({
  49.     element: item,
  50.     width: item.offsetWidth,
  51.     height: item.offsetHeight
  52.   }));
  53.   
  54.   // 然后一次性写入所有修改
  55.   itemData.forEach(data => {
  56.     data.element.style.width = `${data.width + 10}px`;
  57.     data.element.style.height = `${data.height + 10}px`;
  58.   });
  59. }
  61. // 方法3: 使用requestAnimationFrame进行优化
  62. function optimizedReflowExample() {
  63.   const items = document.querySelectorAll('.test-item');
  64.   
  65.   requestAnimationFrame(() => {
  66.     items.forEach(item => {
  67.       item.style.width = '210px';
  68.       item.style.height = '60px';
  69.       item.style.margin = '10px';
  70.       item.style.backgroundColor = '#e0e0e0';
  71.     });
  72.   });
  73. }
  75. // 添加样式
  76. const reflowStyle = document.createElement('style');
  77. reflowStyle.textContent = `
  78.   .test-item {
  79.     padding: 10px;
  80.     margin: 5px;
  81.     background-color: #f8f8f8;
  82.     border: 1px solid #ddd;
  83.     transition: all 0.3s ease;
  84.   }
  85.   .styled {
  86.     width: 200px;
  87.     height: 50px;
  88.     margin: 5px;
  89.     background-color: #f0f0f0;
  90.   }
  91. `;
  92. document.head.appendChild(reflowStyle);
  94. // 创建测试按钮
  95. const testButton1 = document.createElement('button');
  96. testButton1.textContent = '不好的做法';
  97. testButton1.addEventListener('click', badReflowExample);
  98. document.body.appendChild(testButton1);
  100. const testButton2 = document.createElement('button');
  101. testButton2.textContent = '好的做法';
  102. testButton2.addEventListener('click', goodReflowExample);
  103. document.body.appendChild(testButton2);
  105. const testButton3 = document.createElement('button');
  106. testButton3.textContent = '优化的做法';
  107. testButton3.addEventListener('click', optimizedReflowExample);
  108. document.body.appendChild(testButton3);
复制代码

最佳实践与注意事项

事件委托

事件委托是一种利用事件冒泡机制的技术，通过在父元素上设置事件监听器来管理其所有子元素的事件。这种方法可以减少事件监听器的数量，提高性能，特别是对于动态添加的元素。
  2. // 创建列表容器
  3. const listContainer = document.createElement('div');
  4. listContainer.className = 'list-container';
  6. // 创建列表标题
  7. const listTitle = document.createElement('h3');
  8. listTitle.textContent = '事件委托示例';
  9. listContainer.appendChild(listTitle);
  11. // 创建列表
  12. const list = document.createElement('ul');
  13. list.className = 'delegation-list';
  14. list.id = 'delegation-list';
  16. // 添加初始列表项
  17. const initialItems = ['项目1', '项目2', '项目3'];
  18. initialItems.forEach(itemText => {
  19.   const li = document.createElement('li');
  20.   li.textContent = itemText;
  21.   li.className = 'list-item';
  22.   list.appendChild(li);
  23. });
  25. // 添加到容器
  26. listContainer.appendChild(list);
  28. // 添加添加项目按钮
  29. const addButton = document.createElement('button');
  30. addButton.textContent = '添加项目';
  31. addButton.className = 'add-button';
  32. listContainer.appendChild(addButton);
  34. // 添加到DOM
  35. document.body.appendChild(listContainer);
  37. // 不好的做法 - 为每个列表项单独添加事件监听器
  38. function badEventDelegation() {
  39.   const items = document.querySelectorAll('.list-item');
  40.   
  41.   items.forEach(item => {
  42.     item.addEventListener('click', function() {
  43.       this.style.backgroundColor = '#e0f7fa';
  44.       console.log('点击了:', this.textContent);
  45.     });
  46.   });
  47.   
  48.   // 这种方式的问题：
  49.   // 1. 每个列表项都有一个事件监听器，消耗内存
  50.   // 2. 动态添加的列表项不会自动获得事件监听器
  51. }
  53. // 好的做法 - 使用事件委托
  54. function goodEventDelegation() {
  55.   // 只在父元素上添加一个事件监听器
  56.   list.addEventListener('click', function(event) {
  57.     // 检查点击的是否是列表项
  58.     if (event.target.classList.contains('list-item')) {
  59.       event.target.style.backgroundColor = '#e0f7fa';
  60.       console.log('点击了:', event.target.textContent);
  61.     }
  62.   });
  63.   
  64.   // 这种方式的优势：
  65.   // 1. 只有一个事件监听器，节省内存
  66.   // 2. 动态添加的列表项自动获得事件处理能力
  67. }
  69. // 添加新项目的函数
  70. function addNewItem() {
  71.   const itemCount = list.querySelectorAll('.list-item').length;
  72.   const newItem = document.createElement('li');
  73.   newItem.textContent = `项目${itemCount + 1}`;
  74.   newItem.className = 'list-item';
  75.   list.appendChild(newItem);
  76. }
  78. // 为添加按钮绑定事件
  79. addButton.addEventListener('click', addNewItem);
  81. // 使用好的做法
  82. goodEventDelegation();
  84. // 添加样式
  85. const delegationStyle = document.createElement('style');
  86. delegationStyle.textContent = `
  87.   .list-container {
  88.     max-width: 600px;
  89.     margin: 20px auto;
  90.     padding: 20px;
  91.     font-family: Arial, sans-serif;
  92.   }
  93.   .delegation-list {
  94.     list-style: none;
  95.     padding: 0;
  96.   }
  97.   .list-item {
  98.     padding: 10px 15px;
  99.     margin-bottom: 5px;
  100.     background-color: #f5f5f5;
  101.     border-radius: 4px;
  102.     cursor: pointer;
  103.     transition: background-color 0.3s ease;
  104.   }
  105.   .list-item:hover {
  106.     background-color: #eeeeee;
  107.   }
  108.   .add-button {
  109.     margin-top: 10px;
  110.     padding: 8px 12px;
  111.     background-color: #4CAF50;
  112.     color: white;
  113.     border: none;
  114.     border-radius: 4px;
  115.     cursor: pointer;
  116.   }
  117.   .add-button:hover {
  118.     background-color: #45a049;
  119.   }
  120. `;
  121. document.head.appendChild(delegationStyle);
复制代码

内存泄漏预防

在动态创建和操作DOM元素时，如果不注意清理，可能会导致内存泄漏。以下是一些预防内存泄漏的最佳实践。
  2. // 创建测试容器
  3. const memoryTestContainer = document.createElement('div');
  4. memoryTestContainer.className = 'memory-test-container';
  5. document.body.appendChild(memoryTestContainer);
  7. // 创建测试按钮
  8. const createButton = document.createElement('button');
  9. createButton.textContent = '创建元素';
  10. createButton.id = 'create-elements';
  11. memoryTestContainer.appendChild(createButton);
  13. const removeButton = document.createElement('button');
  14. removeButton.textContent = '移除元素';
  15. removeButton.id = 'remove-elements';
  16. memoryTestContainer.appendChild(removeButton);
  18. const leakButton = document.createElement('button');
  19. leakButton.textContent = '创建泄漏元素';
  20. leakButton.id = 'create-leak';
  21. memoryTestContainer.appendChild(leakButton);
  23. const cleanButton = document.createElement('button');
  24. cleanButton.textContent = '清理泄漏';
  25. cleanButton.id = 'clean-leak';
  26. memoryTestContainer.appendChild(cleanButton);
  28. // 创建内容区域
  29. const contentArea = document.createElement('div');
  30. contentArea.id = 'memory-content-area';
  31. memoryTestContainer.appendChild(contentArea);
  33. // 存储元素引用的数组
  34. let elements = [];
  35. let leakedElements = [];
  36. let leakedEventListeners = [];
  38. // 正确创建和移除元素
  39. createButton.addEventListener('click', function() {
  40.   // 创建10个新元素
  41.   for (let i = 0; i < 10; i++) {
  42.     const div = document.createElement('div');
  43.     div.className = 'memory-test-item';
  44.     div.textContent = `元素 ${elements.length + 1}`;
  45.    
  46.     // 添加点击事件
  47.     div.addEventListener('click', function() {
  48.       console.log('点击了:', this.textContent);
  49.     });
  50.    
  51.     // 添加到DOM
  52.     contentArea.appendChild(div);
  53.    
  54.     // 保存引用
  55.     elements.push(div);
  56.   }
  57.   
  58.   console.log('已创建', elements.length, '个元素');
  59. });
  61. removeButton.addEventListener('click', function() {
  62.   // 移除所有元素
  63.   elements.forEach(element => {
  64.     // 从DOM中移除
  65.     if (element.parentNode) {
  66.       element.parentNode.removeChild(element);
  67.     }
  68.    
  69.     // 移除事件监听器（如果知道引用）
  70.     // 在实际应用中，应该保存事件监听器的引用以便移除
  71.   });
  72.   
  73.   // 清空数组
  74.   elements = [];
  75.   
  76.   console.log('已移除所有元素');
  77. });
  79. // 创建内存泄漏示例
  80. leakButton.addEventListener('click', function() {
  81.   // 创建元素但保留不必要的引用
  82.   for (let i = 0; i < 10; i++) {
  83.     const div = document.createElement('div');
  84.     div.className = 'memory-leak-item';
  85.     div.textContent = `泄漏元素 ${leakedElements.length + 1}`;
  86.    
  87.     // 添加事件监听器但保留引用
  88.     const clickHandler = function() {
  89.       console.log('点击了泄漏元素:', this.textContent);
  90.     };
  91.    
  92.     div.addEventListener('click', clickHandler);
  93.    
  94.     // 添加到DOM
  95.     contentArea.appendChild(div);
  96.    
  97.     // 保存元素和事件监听器的引用（即使不再需要）
  98.     leakedElements.push(div);
  99.     leakedEventListeners.push({
  100.       element: div,
  101.       handler: clickHandler
  102.     });
  103.   }
  104.   
  105.   console.log('已创建', leakedElements.length, '个泄漏元素');
  106. });
  108. // 清理内存泄漏
  109. cleanButton.addEventListener('click', function() {
  110.   // 移除所有泄漏元素
  111.   leakedElements.forEach(element => {
  112.     // 从DOM中移除
  113.     if (element.parentNode) {
  114.       element.parentNode.removeChild(element);
  115.     }
  116.   });
  117.   
  118.   // 移除所有事件监听器
  119.   leakedEventListeners.forEach(item => {
  120.     item.element.removeEventListener('click', item.handler);
  121.   });
  122.   
  123.   // 清空数组
  124.   leakedElements = [];
  125.   leakedEventListeners = [];
  126.   
  127.   // 强制垃圾回收（仅在开发环境中可用）
  128.   if (window.gc) {
  129.     window.gc();
  130.     console.log('已执行垃圾回收');
  131.   }
  132.   
  133.   console.log('已清理所有泄漏');
  134. });
  136. // 添加样式
  137. const memoryStyle = document.createElement('style');
  138. memoryStyle.textContent = `
  139.   .memory-test-container {
  140.     max-width: 800px;
  141.     margin: 20px auto;
  142.     padding: 20px;
  143.     font-family: Arial, sans-serif;
  144.   }
  145.   button {
  146.     margin-right: 10px;
  147.     margin-bottom: 10px;
  148.     padding: 8px 12px;
  149.     background-color: #4CAF50;
  150.     color: white;
  151.     border: none;
  152.     border-radius: 4px;
  153.     cursor: pointer;
  154.   }
  155.   button:hover {
  156.     background-color: #45a049;
  157.   }
  158.   #memory-content-area {
  159.     margin-top: 20px;
  160.     border: 1px solid #ddd;
  161.     padding: 15px;
  162.     min-height: 100px;
  163.   }
  164.   .memory-test-item, .memory-leak-item {
  165.     padding: 10px;
  166.     margin-bottom: 5px;
  167.     background-color: #f5f5f5;
  168.     border-radius: 4px;
  169.     cursor: pointer;
  170.   }
  171.   .memory-leak-item {
  172.     background-color: #ffebee;
  173.   }
  174. `;
  175. document.head.appendChild(memoryStyle);
复制代码

安全考虑(XSS防御)

当使用DOM操作动态添加内容时，特别是当内容来自用户输入或外部源时，必须考虑XSS（跨站脚本攻击）的防御。
  2. // 创建安全测试容器
  3. const securityContainer = document.createElement('div');
  4. securityContainer.className = 'security-container';
  5. document.body.appendChild(securityContainer);
  7. // 创建标题
  8. const securityTitle = document.createElement('h2');
  9. securityTitle.textContent = 'XSS防御示例';
  10. securityContainer.appendChild(securityTitle);
  12. // 创建输入区域
  13. const inputArea = document.createElement('div');
  14. inputArea.className = 'input-area';
  16. const inputLabel = document.createElement('label');
  17. inputLabel.textContent = '输入内容（尝试输入HTML或JavaScript代码）：';
  18. inputArea.appendChild(inputLabel);
  20. const userInput = document.createElement('textarea');
  21. userInput.id = 'user-input';
  22. userInput.rows = 4;
  23. userInput.cols = 50;
  24. userInput.placeholder = '例如: <script>alert("XSS攻击")</script> 或 <img src="x" onerror="alert(\'XSS\')">';
  25. inputArea.appendChild(userInput);
  27. const submitButton = document.createElement('button');
  28. submitButton.textContent = '提交';
  29. submitButton.id = 'submit-input';
  30. inputArea.appendChild(submitButton);
  32. securityContainer.appendChild(inputArea);
  34. // 创建显示区域
  35. const displayArea = document.createElement('div');
  36. displayArea.className = 'display-area';
  38. const unsafeTitle = document.createElement('h3');
  39. unsafeTitle.textContent = '不安全的显示方式：';
  40. displayArea.appendChild(unsafeTitle);
  42. const unsafeDisplay = document.createElement('div');
  43. unsafeDisplay.id = 'unsafe-display';
  44. unsafeDisplay.className = 'display-box';
  45. displayArea.appendChild(unsafeDisplay);
  47. const safeTitle = document.createElement('h3');
  48. safeTitle.textContent = '安全的显示方式：';
  49. displayArea.appendChild(safeTitle);
  51. const safeDisplay = document.createElement('div');
  52. safeDisplay.id = 'safe-display';
  53. safeDisplay.className = 'display-box';
  54. displayArea.appendChild(safeDisplay);
  56. securityContainer.appendChild(displayArea);
  58. // 不安全的显示方式（容易受到XSS攻击）
  59. function displayUnsafe(content) {
  60.   // 直接使用innerHTML，不进行任何转义
  61.   unsafeDisplay.innerHTML = content;
  62. }
  64. // 安全的显示方式（防御XSS攻击）
  65. function displaySafe(content) {
  66.   // 方法1: 使用textContent而不是innerHTML
  67.   safeDisplay.textContent = content;
  68.   
  69.   // 方法2: 如果需要保留一些HTML标签，可以使用安全的HTML转义函数
  70.   // safeDisplay.innerHTML = escapeHtml(content);
  71. }
  73. // HTML转义函数
  74. function escapeHtml(unsafe) {
  75.   return unsafe
  76.     .replace(/&/g, "&amp;")
  77.     .replace(/</g, "&lt;")
  78.     .replace(/>/g, "&gt;")
  79.     .replace(/"/g, "&quot;")
  80.     .replace(/'/g, "&#039;");
  81. }
  83. // 创建DOM元素的安全方式
  84. function createElementSafe(tagName, attributes, content) {
  85.   const element = document.createElement(tagName);
  86.   
  87.   // 安全设置属性
  88.   if (attributes) {
  89.     for (const [key, value] of Object.entries(attributes)) {
  90.       // 对于事件处理程序属性，使用addEventListener而不是直接设置
  91.       if (key.startsWith('on')) {
  92.         const eventName = key.substring(2).toLowerCase();
  93.         if (typeof value === 'function') {
  94.           element.addEventListener(eventName, value);
  95.         }
  96.       } else {
  97.         // 对于其他属性，使用setAttribute
  98.         element.setAttribute(key, value);
  99.       }
  100.     }
  101.   }
  102.   
  103.   // 安全设置内容
  104.   if (content !== undefined && content !== null) {
  105.     if (typeof content === 'string') {
  106.       // 使用textContent而不是innerHTML
  107.       element.textContent = content;
  108.     } else if (content instanceof HTMLElement) {
  109.       element.appendChild(content);
  110.     }
  111.   }
  112.   
  113.   return element;
  114. }
  116. // 提交按钮事件处理
  117. submitButton.addEventListener('click', function() {
  118.   const content = userInput.value;
  119.   
  120.   // 显示不安全的内容
  121.   displayUnsafe(content);
  122.   
  123.   // 显示安全的内容
  124.   displaySafe(content);
  125.   
  126.   // 使用安全方式创建元素
  127.   const safeElement = createElementSafe('div', { class: 'safe-element' }, content);
  128.   
  129.   // 添加到安全显示区域
  130.   const safeElementContainer = document.createElement('div');
  131.   safeElementContainer.className = 'safe-element-container';
  132.   
  133.   const safeElementTitle = document.createElement('h4');
  134.   safeElementTitle.textContent = '使用安全函数创建的元素：';
  135.   safeElementContainer.appendChild(safeElementTitle);
  136.   
  137.   safeElementContainer.appendChild(safeElement);
  138.   safeDisplay.appendChild(safeElementContainer);
  139. });
  141. // 添加样式
  142. const securityStyle = document.createElement('style');
  143. securityStyle.textContent = `
  144.   .security-container {
  145.     max-width: 800px;
  146.     margin: 20px auto;
  147.     padding: 20px;
  148.     font-family: Arial, sans-serif;
  149.   }
  150.   .input-area {
  151.     margin-bottom: 20px;
  152.   }
  153.   .input-area label {
  154.     display: block;
  155.     margin-bottom: 10px;
  156.     font-weight: bold;
  157.   }
  158.   .input-area textarea {
  159.     width: 100%;
  160.     padding: 10px;
  161.     border: 1px solid #ddd;
  162.     border-radius: 4px;
  163.     box-sizing: border-box;
  164.   }
  165.   .input-area button {
  166.     margin-top: 10px;
  167.     padding: 8px 16px;
  168.     background-color: #4CAF50;
  169.     color: white;
  170.     border: none;
  171.     border-radius: 4px;
  172.     cursor: pointer;
  173.   }
  174.   .input-area button:hover {
  175.     background-color: #45a049;
  176.   }
  177.   .display-area h3 {
  178.     margin-bottom: 10px;
  179.     color: #333;
  180.   }
  181.   .display-box {
  182.     padding: 15px;
  183.     margin-bottom: 20px;
  184.     border: 1px solid #ddd;
  185.     border-radius: 4px;
  186.     min-height: 50px;
  187.     background-color: #f9f9f9;
  188.   }
  189.   #unsafe-display {
  190.     border-color: #f44336;
  191.     background-color: #ffebee;
  192.   }
  193.   #safe-display {
  194.     border-color: #4CAF50;
  195.     background-color: #e8f5e9;
  196.   }
  197.   .safe-element-container {
  198.     margin-top: 15px;
  199.     padding-top: 15px;
  200.     border-top: 1px dashed #ccc;
  201.   }
  202.   .safe-element-container h4 {
  203.     margin-top: 0;
  204.     color: #4CAF50;
  205.   }
  206.   .safe-element {
  207.     padding: 10px;
  208.     background-color: white;
  209.     border: 1px solid #ddd;
  210.     border-radius: 4px;
  211.   }
  212. `;
  213. document.head.appendChild(securityStyle);
复制代码

总结

DOM节点的创建与插入是前端开发中的核心技能，掌握这些技术对于构建动态、交互式的Web应用至关重要。本文从基础概念出发，详细介绍了DOM节点的各种创建方法（如createElement、createTextNode、createDocumentFragment等）和插入方法（如appendChild、insertBefore、insertAdjacentHTML等），并通过丰富的实战案例展示了这些技术的实际应用。

我们还探讨了性能优化策略，包括使用DocumentFragment减少重排、批量操作DOM以及优化重排与重绘。此外，文章还介绍了事件委托、内存泄漏预防和XSS防御等最佳实践，帮助开发者编写更安全、更高效的代码。

在实际开发中，选择合适的DOM操作方法不仅能够提升用户体验，还能显著改善应用性能。随着前端技术的不断发展，现代框架如React、Vue等虽然提供了更高级的抽象，但理解底层DOM操作原理仍然是成为一名优秀前端开发者的必备技能。

通过深入理解和熟练应用本文介绍的技术，开发者将能够构建出更加动态、响应迅速且安全的Web应用，为用户提供卓越的交互体验。
「七転び八起き（ななころびやおき）」
回复

使用道具 举报

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

本版积分规则