当前位置：首页 > news >正文

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

news 2025/3/13 0:03:51

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 = ''; // 清空列表// 创建 DocumentFragmentconst 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();
});