Dom 和虚拟 Dom-js教程-PHP中文网

Dom 和虚拟 Dom

Susan Sarandon

发布： 2024-11-02 02:33:03

原创

610 人浏览过

在这篇文章中，我们将详细研究 dom 以及什么是虚拟 dom。

什么是 DOM（文档对象模型）？

当网页加载到浏览器中时，浏览器会生成** HTML** 以将请求的页面显示到 .这个 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>Document object model</title>
</head>
<body>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top"  alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Lorem, ipsum dolor.</h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, tenetur!</p>
          <a href="#" class="btn btn-primary">Lorem, ipsum.</a>
        </div>
      </div>


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

登录后复制

console.log(document)

登录后复制

输出 :

Dom and Virtual Dom

我们可以通过console.log(document)访问dom。当我们检查 Document 对象 时，我们知道该对象代表一个 HTML 文档。换句话说，文档对象包含 HTML 文档.

中的所有标签

使用Javascript，我们可以访问文档对象内的标签并操作此文档对象内的标签来创建动态网页。让我们举一个如何访问的例子：

const wrapper = document.getElementById("card")

console.log(wrapper)

登录后复制

输出：

Dom and Virtual Dom

什么是虚拟 DOM？

Dom and Virtual Dom

我们现在知道更改 dom（“更改 HTML”）的最简单方法是更改元素中的 innerHTML 属性。这种修改 html 的方法在 DOM 重绘（“更新用户看到的内容”）中性能效果不佳。这是因为 innerHTML需要从字符串中解析 DOM 节点，进行预处理并附加它。如果网页上的 html 突变过多，就会出现性能问题。

那么性能问题是如何解决的呢？

这个问题已通过创建虚拟 DOM 得到解决。 虚拟 DOM 是存储在内存中的 真实 DOM 的副本。当用户与网页交互并且网页状态更新时，会在内存中创建一个新的虚拟 DOM。这个新的虚拟 DOM 与之前的 虚拟 DOM 进行比较以识别更改，并将这些更改应用于 真实 DOM 以显示给用户。

这是您使用的现代库的工作逻辑，并使用dif算法进行比较。他们都使用虚拟DOM。但是，尽管虚拟 DOM 方法速度很快，但在性能方面还是有一些需要考虑的地方。虚拟域的更改会呈现整个网页库具有用于性能优化的挂钩