dom常见操作方法汇总，通过一个案例熟练掌握

DOM（Document Object Model）是用于处理 HTML 和 XML 文档的标准接口。在 Web 开发中，DOM 提供了一种方式来读取和操作页面的内容。以下是 DOM 中一些常见的操作：

1. 选择元素

选择元素通常是 DOM 操作的第一步，常见的方法有：

• getElementById: 根据元素的 ID 获取元素。

  document.getElementById('myDiv');
  

• getElementsByClassName: 根据类名获取一组元素。

  document.getElementsByClassName('myClass');
  

• getElementsByTagName: 根据标签名获取一组元素。

  document.getElementsByTagName('p');
  

• querySelector: 根据 CSS 选择器获取单个元素。

  document.querySelector('#myDiv');
  

• querySelectorAll: 根据 CSS 选择器获取一组元素。

  document.querySelectorAll('.myClass');
  

2. 创建元素

创建新的 DOM 元素：

• createElement: 创建一个新的 HTML 元素。

  const newDiv = document.createElement('div');
  

• createTextNode: 创建一个新的文本节点。

  const newText = document.createTextNode('Hello World!');
  

• createDocumentFragment: 创建一个新的文档碎片。
  document.createDocumentFragment() 是一个用于创建一个新的 DocumentFragment 对象的方法。DocumentFragment 是一种特殊的 DOM 节点，常用于批量操作 DOM 元素，以提高页面性能和减少重排（re-layout）和重绘（repainting）的次数。

  语法

  var fragment = document.createDocumentFragment();
  

  返回值

  • 返回一个新的 DocumentFragment 对象。

  用途

  DocumentFragment 主要用于以下场景：

  1. 批量插入元素：可以先在一个 DocumentFragment 中创建和配置多个 DOM 元素，然后再一次性插入到文档中，从而减少页面重排和重绘的次数。
  2. 临时存储元素：可以将一组元素暂时存储在 DocumentFragment 中，以便稍后进行统一处理或插入。

  方法

  DocumentFragment 对象本身也具有一些方法，可以通过这些方法来操作它所包含的子节点：

  • appendChild: 将一个节点添加到 DocumentFragment 的子节点列表的末尾。
  • removeChild: 从 DocumentFragment 中移除一个子节点。
  • insertBefore: 在指定的子节点之前插入一个新的子节点。

  示例

  下面是一些使用 document.createDocumentFragment() 的示例：

  创建并插入多个元素

  // 创建 DocumentFragment
  const fragment = document.createDocumentFragment();
  
  // 创建一些元素并添加到 DocumentFragment 中
  const div1 = document.createElement('div');
  div1.textContent = 'Div 1';
  fragment.appendChild(div1);
  
  const div2 = document.createElement('div');
  div2.textContent = 'Div 2';
  fragment.appendChild(div2);
  
  const div3 = document.createElement('div');
  div3.textContent = 'Div 3';
  fragment.appendChild(div3);
  
  // 将 DocumentFragment 插入到页面中的某个元素
  const container = document.getElementById('container');
  container.appendChild(fragment);
  

  批量操作元素

  // 创建 DocumentFragment
  const fragment = document.createDocumentFragment();
  
  // 创建多个元素
  const elements = [
    { tag: 'p', content: 'Paragraph 1' },
    { tag: 'span', content: 'Span 1' },
    { tag: 'div', content: 'Div 1' }
  ];
  
  // 将元素添加到 DocumentFragment 中
  elements.forEach(({ tag, content }) => {
    const element = document.createElement(tag);
    element.textContent = content;
    fragment.appendChild(element);
  });
  
  // 将 DocumentFragment 插入到页面中的某个元素
  const body = document.body;
  body.appendChild(fragment);
  

  优点

  使用 DocumentFragment 的主要优点包括：

  1. 性能提升：通过在 DocumentFragment 中创建和配置多个元素，然后再一次性插入到文档中，可以减少页面的重排和重绘次数，从而提高性能。
  2. 代码组织：可以将多个元素的创建和配置过程集中在一起，使得代码更加整洁和易于维护。

  兼容性

  document.createDocumentFragment() 方法在所有现代浏览器中都是支持的，包括 IE9 及以上版本。如果你需要支持更早版本的浏览器，可能需要使用其他方法来替代，但通常这不是一个问题。

  通过使用 document.createDocumentFragment()，你可以更高效地管理 DOM 元素的创建和插入，特别是在需要批量操作多个元素时。

3. 插入、删除和替换元素

对 DOM 元素进行插入、删除和替换的操作：

• appendChild: 在父元素的子元素列表末尾添加新的子元素。

  parent.appendChild(newDiv);
  

• insertBefore: 在指定的子元素之前插入新的子元素。

  parent.insertBefore(newDiv, existingChild);
  

• removeChild: 移除父元素中的一个子元素。

  parent.removeChild(existingChild);
  

• replaceChild: 替换父元素中的一个子元素。

  parent.replaceChild(newDiv, oldDiv);
  

4. 修改属性和样式

修改元素的属性和样式：

• setAttribute: 设置或更改元素的属性。

  element.setAttribute('class', 'newClass');
  

• getAttribute: 获取元素的属性值。

  const className = element.getAttribute('class');
  

• removeAttribute: 删除元素的属性。

  element.removeAttribute('class');
  

• style: 访问元素的内联样式。

  element.style.color = 'red';
  

5. 修改内容

修改元素的内容：

• innerHTML: 获取或设置元素的 HTML 内容。

  element.innerHTML = '<p>New content</p>';
  

• textContent: 获取或设置元素的纯文本内容。

  element.textContent = 'New text content';
  

6. 事件处理

添加事件监听器：

• addEventListener: 添加事件监听器。

  element.addEventListener('click', function(event) {
    console.log('Clicked!');
  });
  

• removeEventListener: 移除事件监听器。

  element.removeEventListener('click', function(event) {
    console.log('Clicked!');
  });
  

7. 查询和操作表单数据

操作表单元素：

• value: 获取或设置输入框的值。

  inputElement.value = 'New Value';
  

• checked: 获取或设置复选框的状态。

  checkboxElement.checked = true;
  

8. 遍历 DOM 树

遍历 DOM 树的常见属性：

• parentNode: 获取元素的父节点。
• childNodes: 获取元素的子节点列表。
• firstChild: 获取元素的第一个子节点。
• lastChild: 获取元素的最后一个子节点。
• nextSibling: 获取元素的下一个兄弟节点。
• previousSibling: 获取元素的上一个兄弟节点。

以上就是一些常见的 DOM 操作，这些操作可以帮助开发者动态地管理和更新页面内容。

下面我将设计一个简单的案例，通过一系列步骤来练习 DOM 的常见操作。我们将创建一个简单的待办事项列表应用，用户可以添加待办事项、标记已完成的事项，并删除事项。

案例描述

• 用户可以在输入框中输入待办事项。
• 用户点击“添加”按钮后，待办事项将显示在列表中。
• 每个待办事项旁边都有一个复选框，用户可以勾选表示完成。
• 用户还可以点击“删除”按钮来移除已有的待办事项。

HTML 结构

首先，我们需要一个基本的 HTML 页面结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>待办事项列表</title>
<style>
  .container {
    width: 300px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
  }
  .todo-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .completed {
    text-decoration: line-through;
    color: #aaa;
  }
</style>
</head>
<body>
<div class="container">
  <input type="text" id="todoInput" placeholder="输入待办事项">
  <button id="addButton">添加</button>
  <ul id="todoList"></ul>
</div>

<script src="app.js"></script>
</body>
</html>

JavaScript 代码

接下来，我们编写 JavaScript 代码来实现上述功能：

document.addEventListener('DOMContentLoaded', function() {
	const todoInput = document.getElementById('todoInput');
	const addButton = document.getElementById('addButton');
	const todoList = document.getElementById('todoList');

	// 存储待办事项
	let todos = [];

	// 添加待办事项
	addButton.addEventListener('click', function() {
		const value = todoInput.value.trim();
		if (value) {
			todos.push({ text: value, completed: false });
			renderTodos();
			todoInput.value = '';
		}
	});

	// 渲染待办事项列表
	function renderTodos() {
		todoList.innerHTML = ''; // 清空列表
		// 创建 DocumentFragment
		const fragment = document.createDocumentFragment();
		todos.forEach(todo => {
			const li = document.createElement('li');
			li.className = 'todo-item';
			const checkbox = document.createElement('input');
			checkbox.type = 'checkbox';
			checkbox.checked = todo.completed;
			checkbox.addEventListener('change', () => {
				todo.completed = checkbox.checked;
				if (checkbox.checked) {
					li.classList.add('completed');
				} else {
					li.classList.remove('completed');
				}
			});

			const span = document.createElement('span');
			span.textContent = todo.text;
			span.className = todo.completed ? 'completed' : '';

			const removeButton = document.createElement('button');
			removeButton.textContent = '删除';
			removeButton.addEventListener('click', () => {
				todos = todos.filter(t => t !== todo);
				renderTodos();
			});

			li.appendChild(checkbox);
			li.appendChild(span);
			li.appendChild(removeButton);
			fragment.appendChild(li);
		});	
		todoList.appendChild(fragment);		
	}

	// 初始化渲染
	renderTodos();
});

功能解释

1. 获取 DOM 元素：使用 document.getElementById 获取必要的 DOM 元素。
2. 添加待办事项：当用户点击“添加”按钮时，获取输入框中的文本，将其添加到 todos 数组中，并重新渲染列表。
3. 渲染待办事项列表：遍历 todos 数组，为每个待办事项创建一个 <li> 元素，并附加上相应的复选框和删除按钮。
4. 标记为完成：当用户勾选复选框时，更新 todos 数组中对应项的状态，并更改文本的颜色和样式。
5. 删除待办事项：当用户点击删除按钮时，从 todos 数组中移除对应的待办事项，并重新渲染列表。

通过这个案例，你可以练习 DOM 的选择、创建、插入、删除、修改属性和样式等多种操作，同时也能理解如何通过事件监听来响应用户的交互行为。