虚拟DOM介绍

太阳照常升起--

于 2024-09-17 01:40:13 发布

阅读量309

点赞数 5

分类专栏：前端文章标签：前端 javascript 开发语言 dom DOM DOM树 dom树

本文链接：https://blog.csdn.net/lf_1234/article/details/142309727

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

工作流程

虚拟 DOM 并不直接发生在用户界面构建之前，而是作为构建用户界面过程中的一个重要部分。具体来说，虚拟 DOM 的工作流程如下：

初始化阶段：
- 组件定义：在应用程序开发过程中，开发者首先定义组件和它们的结构。这通常涉及编写代码，确定组件的状态和属性，以及设计组件的布局和样式。
渲染阶段：
- 创建虚拟 DOM：当应用程序运行时，框架（如 React）会使用组件定义来创建一个虚拟 DOM 树。这一阶段中，虚拟 DOM 是一个轻量级的 JavaScript 对象树，代表了用户界面的当前状态。
- 生成真实 DOM：虚拟 DOM 被用来生成实际的 HTML 和 DOM 结构，这是浏览器渲染用户界面所需的。
更新阶段：
- 数据变化：当组件的状态或属性发生变化时，虚拟 DOM 会重新计算生成新的虚拟 DOM 树。
- 比较虚拟 DOM：框架会将新的虚拟 DOM 树与旧的虚拟 DOM 树进行比较，找出差异。
- 更新真实 DOM：根据差异，框架只将需要更新的部分应用到真实 DOM 上，从而优化性能和减少重绘。

虚拟 DOM 的主要作用是在用户界面构建和更新过程中提高效率。它通过减少对真实 DOM 的直接操作，来加快渲染速度和减少性能开销。因此，虽然虚拟 DOM 的创建和使用发生在构建用户界面的过程中，但它并不是构建用户界面的前期准备工作，而是实际渲染和更新过程中的一个核心机制。

虚拟 DOM 通过计算前后虚拟 DOM 的差异，只更新实际 DOM 中发生变化的部分。这种方法避免了直接操作整个 DOM，从而提高了性能和效率。

DOM（文档对象模型）是一个编程接口，用于表示和操作 HTML 或 XML 文档中的内容。它将文档结构表示为一个树形结构，其中每个节点代表文档中的一个部分，如元素、属性或文本。通过 DOM，你可以用编程语言（如 JavaScript）来动态修改、添加或删除这些内容。

以下是一些 DOM 的基本概念和操作示例：

1. DOM 结构示例

假设你有以下的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <title>Sample Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
  <button id="myButton">Click me!</button>
</body>
</html>

这个 HTML 代码会被转换成一个 DOM 树，结构如下：

html（根节点）
- head
  - title
- body
  - h1
  - p
  - button

2. 使用 JavaScript 操作 DOM

获取元素：

const button = document.getElementById('myButton'); // 获取具有指定 ID 的元素

修改元素内容：

const heading = document.querySelector('h1'); // 获取第一个 h1 元素
heading.textContent = 'Hello, Universe!'; // 修改 h1 元素的文本内容

添加新元素：

const newParagraph = document.createElement('p'); // 创建一个新的 p 元素
newParagraph.textContent = 'This is a new paragraph.'; // 设置新 p 元素的文本内容
document.body.appendChild(newParagraph); // 将新 p 元素添加到 body 中

删除元素：

const paragraph = document.querySelector('p'); // 获取第一个 p 元素
paragraph.remove(); // 从 DOM 中删除这个 p 元素

修改元素属性：

const button = document.getElementById('myButton');
button.setAttribute('disabled', 'true'); // 设置 button 元素的 disabled 属性

3. 事件处理

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button was clicked!');
}); // 为 button 元素添加点击事件处理程序