DOM 解析：DOM、Shadow DOM 和 Virtual DOM

DOM

影子 DOM

虚拟 DOM

总结

感谢阅读

文档对象模型( DOM )是 Web 开发的基本概念之一，但对于初学者来说，掌握它往往比较困难。随着虚拟 DOM和影子 DOM等新增DOM实体的出现，人们发现自己越来越难以理解它们的含义。

动图

今天我们要解决这个问题。读完这篇文章后，你将能够像专业人士一样就这些话题进行对话。

DOM

在继续学习DOM之前，我们先来看一下它的定义。定义如下：

DOM 是 HTML 或 XML 文档的 API，它创建了一个可访问和操作的逻辑结构。

Web 浏览器通过解析HTML文档来创建DOM ，因此我们可以使用JavaScript与其交互，并使用CSS选择和设置元素的样式。

DOM 通常如下所示：

动图

我们还提到过可以使用JavaScript与DOM进行交互。让我们看看它是如何完成的：

<!-- part of the html body -->
<div id="root"></div>

// getting access to the element (DOM node)
const rootElement = document.querySelector("#root");

// now you can modify the element as you please
// modifying style
rootElement.style.color = "red";
// adding children
const paragraph = document.createElement("p");
const text = document.createTextNode("This is a paragraph.");
paragraph.appendChild(text);
rootElement.appendChild(paragraph); 

影子 DOM

首先，定义显然是：

Shadow DOM API 是其中的关键部分，它提供了一种将隐藏的分离 DOM 附加到元素的方法。

Shadow DOM可以被认为是允许开发人员插入嵌套DOM 的一层。下图完美地概括了这一点：

广泛使用Shadow DOM 的著名框架之一是Ionic。以下是Ionic 组件：

<ion-button>Default</ion-button>

当由浏览器（在iOS上）呈现时，变为：

<ion-button size="small" class="ios button button-small button-solid ion-activatable ion-focusable hydrated">
    <button type="button" class="button-native" part="native"><span class="button-inner"><slot name="icon-only"></slot><slot name="start"></slot><slot></slot><slot name="end"></slot></span></button>
    Default
</ion-button>

您可以使用Chrome Dev Tools深入了解不同组件的Shadow DOM ：

虚拟 DOM

让我们看看 Google 是如何描述虚拟 DOM 的：

虚拟 DOM 是声明式 Web 框架（例如 React、Vue.js 和 Elm）中使用的 DOM 的轻量级 JavaScript 表示。

DOM操作可能非常强大，但代价也非常高昂。它是Web 开发领域中最慢的操作之一。为了减少DOM操作的数量，我们使用虚拟 DOM来修改DOM，仅在确实需要修改时才进行，而不是每次发生更改时都进行修改。

让我们用一个基于React的例子来演示。我们用来编写React应用的JSX：

// demo jsx
<div style={{ color: "red" }}>
    <h1>Hello world!</h1>
    <p>Some random text</p>
</div>

使用Babel等转换器转换为简单的JavaScript：

React.createElement(
  "div",
  { style: { color: "red" } },
  React.createElement(
    "h1",
    null,
    "Hello world!"
  ),
  React.createElement(
    "p",
    null,
    "Some random text"
  )
);

React Virtual DOM只是DOM的对象表示。

你可能会问，为什么React要存储DOM的额外副本？

嗯，更新JavaScript对象比重新绘制DOM要快得多。如前所述，虚拟 DOM会计算数据的变化，并且仅在需要时触发DOM重新渲染，从而大幅提升性能。

总结

在本文中，我们讨论了DOM、Shadow DOM和Virtual DOM。希望这对您的开发之旅有所帮助！

快乐开发！

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。