文档对象模型dom_详细了解文档对象模型（DOM）-CSDN博客

我们都听说过不时提及与JavaScript相关的DOM或文档对象模型 。 DOM是Web开发中一个非常重要的概念。没有它，我们将无法在浏览器中动态修改HTML页面 。

学习和理解DOM可以更好地访问，更改和监视 HTML页面的不同元素。文档对象模型还可以帮助我们减少脚本执行时间的不必要增加 。

数据结构树

在讨论DOM是什么，它如何存在，如何存在以及在其中发生什么之前，我希望您了解树。不是针叶树和落叶树，而是关于数据结构树 。

如果我们简化数据定义的定义，那么理解数据结构的概念会容易得多。我要说的是，数据结构是关于安排数据的 。是的，只是陈旧的布置，就像您将家具摆在家里或将书放在书架上或所有要在餐桌上用餐的所有不同食物组一样，以使其对您有意义 。

当然，这不是数据结构的全部内容，而是几乎所有内容的起点。这种“安排”是一切的核心。在DOM中也非常重要。但是我们还没有谈论DOM，所以让我引导您转向您可能熟悉的数据结构：arrays 。

数组和树

数组具有索引和长度，它们可以是多维的 ，并具有更多特征。了解关于数组的这些知识是非常重要的，我们现在就不要再为此烦恼了。对我们来说，数组非常简单。 就是在同一行中排列不同的东西 。

类似地，在考虑树木时，可以说，这是将事物彼此叠放，仅将一件事放在顶部。

现在，您可以从以前拿起单行鸭子， 将其直立 ，然后告诉我，“现在，每只鸭子都在另一只鸭子下面”。那是一棵树吗？它是。

根据您的数据是什么或如何使用它们，树中最顶层的数据（称为根）可能是非常重要的 ，也可能只是用来封装其下的其他元素的 。

无论哪种方式，树数据结构中最顶层的元素都非常重要。它提供了一个开始搜索我们要从树中提取的信息的地方。

DOM的含义

DOM代表文档对象模型 。该文档指向一个HTML（XML）文档 ，该文档 表示为Object 。（在JavaScript中，所有内容都只能表示为对象！）

该模型由浏览器创建，该浏览器获取HTML文档并创建一个表示该文档的对象。我们可以使用JavaScript访问该对象。并且由于我们使用该对象来操纵HTML文档并构建自己的应用程序，因此DOM基本上是一种API 。

DOM树

在JavaScript代码中，HTML文档表示为object 。从该文档读取的所有数据也都保存为对象 ，彼此嵌套（因为正如我之前所说，在JavaScript中，所有内容都只能表示为对象）。

因此，这基本上是DOM数据在代码中的物理排列：所有内容都按对象排列 。从逻辑上讲， 它是一棵树 。

DOM解析器

每个浏览器软件都有一个名为DOM Parser的程序 ，该程序负责将HTML文档解析为DOM 。

浏览器读取HTML页面并将其数据转换为组成DOM的对象。这些JavaScript DOM对象中存在的信息在逻辑上排列为称为DOM树的数据结构树。

将数据从HTML解析到DOM树

取一个简单HTML文件。它具有根元素 <html> 。它的子元素是<head>和<body> ，每个子元素都有自己的许多子元素。

因此，本质上，浏览器读取HTML文档中的数据 ，类似于以下内容：

<html>
  <head>
    <meta/>
    <link/>
  </head>
  <body>
    <header>
		  <h1></h1>
			   <h2></h2>
    </header>
    <main>
		  <article>
				<p></p>
				<p></p>
				<p></p>
		  </article>
    </main>
    <footer>
		  <div></div>
    </footer>
  </body>
</html>

然后，将它们排列成这样的DOM树 ：

DOM树中每个HTML元素（及其所属内容）的表示形式称为Node 。 根节点是<html>的节点。

JavaScript中的DOM接口称为document （因为它是HTML文档的表示形式）。因此，我们通过 JavaScript中的document接口访问HTML文档的DOM树。

我们不仅可以访问，而且可以通过DOM 操作HTML文档 。我们可以将元素添加到网页上，删除并更新它们。每次我们更改或更新DOM树中的任何节点时，它都会反映在网页上 。

节点的设计方式

我之前已经提到过，HTML文档中的每条数据都保存为JavaScript中的对象 。那么，保存为对象的数据如何在逻辑上排列成树呢？

DOM树的节点具有某些特征或属性。树中几乎每个节点都有一个父节点 （在它上面的节点）， 子节点 （在它下面的节点）和兄弟姐妹 （属于同一父节点的其他节点）。在一个节点的上方，下方和周围拥有这个族，才有资格将其作为树的一部分 。

每个节点的族信息都作为属性保存在表示该节点的对象中 。例如， children是节点的属性，该属性携带该节点的子元素列表，因此在逻辑上将其子元素排列在该节点下。

避免过度操作DOM

我们可能会发现更新DOM很有用（为了修改网页），但有一些事情像过度使用它 。

假设您要使用JavaScript更新网页上<div>的颜色。您需要做的是访问其对应的DOM节点对象并更新color属性。这不应影响树的其余部分（树中的其他节点）。

但是，如果要从树中删除一个节点或向其中添加一个 节点怎么办？ 可能必须重新排列整个树，同时删除节点或将其添加到树中。这是一项昂贵的工作。完成这项工作需要时间和浏览器资源。

例如，假设您要向表中添加五行 。对于每一行，在创建新节点并将其添加到DOM时，该树每次都会更新，总共最多更新五次。

我们可以通过使用DocumentFragment接口避免这种情况。可以将它想象成一个可以容纳所有五行并添加到树中的盒子。这样，五行被添加为单个数据，而不是一个接一个地添加，从而导致树中只有一个更新。

这不仅在我们删除或添加元素时发生，而且调整元素的大小也会影响其他节点，因为调整大小后的元素可能需要周围的其他元素来调整其大小 。因此，所有其他元素的对应节点将需要更新，并且HTML元素将根据新规则再次呈现。

同样，当整个网页的布局受到影响时， 该网页的一部分或全部可能会重新呈现 。此过程称为回流。为了避免过多的重排，请确保您没有对DOM进行过多更改。对DOM的更改并不是唯一会导致网页重排的事情。取决于浏览器，其他因素也可能对其造成影响。

结语

打结语，DOM 可视化为一棵树，由HTML文档中找到的所有元素组成。从物理上讲（就像任何数字技术所能获得的物理一样），它是一组嵌套JavaScript对象 ，这些对象的属性和方法保存着信息，从而可以将它们逻辑地排列成一棵树 。

翻译自: https://www.hongkiat.com/blog/understanding-document-object-model/