DOM是什么

DOM 是 Document Object Model（文档对象模型）的缩写。

简单理解

DOM 是浏览器将 HTML 文档解析成的树形结构，每个 HTML 元素都是树中的一个节点，JavaScript 可以通过 DOM 操作这些节点。

举个例子

假设你有这样的 HTML：

<div>

<h1>标题</h1>

<button>点击我</button>

</div>

浏览器会把它解析成这样的 DOM 树：

div

├── h1 ("标题")

└── button ("点击我")

在前端框架中的作用

在 Vue 中，你写的是模板：

<template>

<div>

<h1>{{ title }}</h1>

<button @click="handleClick">点击我</button>

</div>

</template>

Vue 会：

1. 将模板编译成虚拟 DOM（Virtual DOM）

1. 将虚拟 DOM 渲染成真实 DOM（浏览器中的实际元素）

1. 当数据变化时，更新对应的 DOM 节点

"DOM 销毁重建"

之前提到的 v-if/v-else 会导致 DOM 销毁重建：

<!-- 使用 v-if/v-else -->

<div v-if="show">内容A</div>

<div v-else>内容B</div>

当 show 从 true 变成 false 时：

• 浏览器会删除 <div>内容A</div> 这个 DOM 节点

• 创建新的 <div>内容B</div> DOM 节点

这就是"DOM 销毁重建"。

对比：单一元素 + 动态属性

<!-- 单一元素，只改变属性 -->

<div :disabled="!show">内容</div>

当 show 改变时：

• DOM 节点不会删除和重建

• 只改变 disabled 属性

• 性能更好

总结

• DOM = 浏览器中的 HTML 元素树

• 操作 DOM = 修改页面上的元素

• DOM 销毁重建 = 删除旧元素，创建新元素（开销较大）

• 修改属性 = 只改变元素属性（开销较小）

简单记忆：DOM 就是你在浏览器中看到的页面元素，JavaScript/Vue 通过操作 DOM 来改变页面内容。