在这篇文章中，我们将详细讲解DOM（文档对象模型）以及什么是虚拟DOM。
DOM是什么（文档对象模型）?当一个网页被加载到浏览器中后，浏览器生成HTML来显示它。这个结构就像是一个树形结构。DOM是由浏览器将一个网页内容（HTML或XML）转换成面向对象的结构而形成的。因此，在浏览器中，页面内容按照这种结构被组织成树形。每个HTML标签或内容都作为一个节点存在。
现在让我们来探索一下文档对象模型：
让我们写一段代码来获取文档对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档对象模型</title>
</head>
<body>
<div class="card" style="width: 18rem;">
<img class="card-img-top" alt="卡片图片描述">
<div class="card-body">
<h5 class="card-title">文档对象模型示例</h5>
<p class="card-text">这是一个示例文档对象模型内容。</p>
<a href="#" class="btn btn-primary">文档对象模型按钮</a>
</div>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/script.js"></script>
</body>
</html>
切换到全屏，退出全屏
控制台输出(document)点击进入全屏，点击退出全屏
结果:
（图片描述：这里是一张示例图片）
通过 console.log(document)，我们可以访问 DOM。这里，document 对象就是我们所说的文档对象。当我们查看这个 Document 对象 的时候，我们发现它代表的是一个 HTML 文档，换句话说，它包含了所有 HTML 文档中的标签。
使用 Javascript ，我们可以访问文档对象中的标签，并操作文档对象中的标签，来创建动态网页。我们来看一个访问的例子：
const wrapper = document.getElementById("card"); // 获取id为"card"的元素
console.log(wrapper); // 输出wrapper元素全屏模式, 退出全屏
输出：
什么是虚拟DOM（文档对象模型）?
如图所示
我们现在知道，更改DOM（也就是修改HTML）最简单的方法是修改元素的 innerHTML 属性。这种方法在更新用户看到的DOM（也就是重新绘制页面）方面表现不佳。这是因为 innerHTML 需要从字符串中解析DOM节点，进行预处理并追加这些节点。如果网页上有太多的HTML修改，性能问题就可能发生。
性能问题是怎么解决的？
这个问题通过创建一个虚拟DOM来解决。虚拟DOM是真实DOM的一个内存副本。当网页状态变化时，会在内存中创建一个新虚拟DOM。将新虚拟DOM与旧虚拟DOM进行对比，识别变化，并将这些变化应用到真实DOM中，展示给用户。
这是你使用的现代库的工作原理，并使用了diff算法进行比较。虽然虚拟DOM的方法很快，但在性能方面仍有一些需要考虑的细节。虚拟DOM中的任何更改都会导致整个网页重新渲染，库中提供了钩子以进行性能优化。
结论在这篇文章里，我们讨论了 DOM 和 虚拟 DOM 是什么。我们了解了使用虚拟 DOM 的原因。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
