什么是DOM？为什么网页设计需要DOM？
为了制作设计良好、引人入胜的网页，您网站的文件需要相互访问，而文档对象模型（或DOM）使这成为可能。
什么是DOM？
文档对象模型 (DOM) 是 HTML 的编程接口。它将 HTML 文档的内容转换为标准化对象，JavaScript 等函数式编程语言可以轻松访问和修改该对象。由于大多数网页事件是由非 HTML 代码驱动的，因此所有动态网页都依赖 DOM 来正常显示和运行。
为了更好地理解为什么 DOM 有用，让我们首先讨论“对象”在计算机编程中的含义。
什么是对象？
归根结底，计算机软件的最终任务是对数据执行操作。数据有各种不同的类型：数字、字符等，仅举几例。
程序执行的越多，它需要处理和处理的数据就越多。如果没有一个可扩展的、有组织的系统来执行此操作，日益增加的复杂性将导致错误。
因此，为了组织相关的数据片段，程序员使用一种称为对象的数据类型。对象与其他数据类型不同，因为它们的目的是保存其他数据。一个对象在一个共同的概念下包含相关的数据片段，存储在一个层次结构中。
下面是一个示例：假设您正在构建一个存储有关房屋信息的软件。在现实生活中，房屋包含很多东西——房间、家具、电器和人，更不用说其他相关信息，如邻里、地址和楼层数。
如果您想在软件程序中表示房屋变量，单独存储所有这些与房屋相关的数据是没有意义的。相反，您可以为系统中的每个房屋创建一个“房屋”对象，并将所有房屋物品放入其中。“房子”可以包含我们上面描述的所有信息的数据，等等。
您甚至可以将对象放入其他对象中。在我们的示例中，房屋对象可能包含“房间”对象。您可以将一个房间对象指定为厨房，它本身可以包含电器、台面材料等的数据。
这里的主要内容是对象以逻辑的、分层的方式将数据组合在一起。为了更好地理解这一点，想象一个像树这样的物体是有帮助的。嗯，更像是一棵倒过来的树。对象的名称就像树的“根”，它的所有分支就像存储在其中的数据。这是一棵树来可视化我们的房子对象：
为什么我们需要 DOM
在我开始计划我的豪宅之前，让我们将这个对象概念与 HTML 联系起来。看看这个基本的 HTML 文件：
请注意，它的部分也是按层次结构构建的。<html> 标签在我们的例子中就像最顶层的“房子”。在我们的 HTML“房子”中，我们有 <head> 和 <body> 标签，它们就像我们的房间。最后，有最具体的元素：<title>、<h1>、<h2>、<p>、<img> 和 <button>。把这些想象成房间特定的物品，比如床和灯。
HTML 文档中的元素以这种方式构建，其原因与对象相同：层次结构有助于计算机程序读取和处理信息。在 HTML 的情况下，您的 Web 浏览器就是程序，而 JavaScript 等脚本语言则用于更改和修改 HTML 代码。
但是，有一个问题。HTML 文档本身不是对象。如果没有某种文件到对象的转换，它们就不能被 JavaScript 读取。这就是 DOM 的用武之地。
DOM 将整个 HTML 文档表示为单个对象。为了创建 DOM，读取 HTML 文件的 Web 浏览器接收其所有部分，从根 <html> 元素到最小的 <span> 标签，并将它们作为 JavaScript 理解的对象输出。
“代表”这个词在这里很重要。DOM 不是 HTML 文件的副本——它只是 Web 浏览器组织 HTML 信息的一种不同方式。
浏览器创建 DOM 的方式类似于它创建网页的方式。当您在浏览器中打开任何页面时，您会看到浏览器对底层 HTML 的可视化表示。您正在查看相同的内容，但组织为您的大脑可以轻松理解的页面。DOM 是浏览器表示 HTML 的另一种方式。在 DOM 中，HTML 被组织成一个 JavaScript 可以轻松理解的对象。
还记得我之前的树示例吗？以下是 DOM 将我们的简单 HTML 文件表示为 JavaScript 友好对象的方式：
在我们继续之前要注意的另一件事是：DOM 并非特定于 JavaScript。任何编程语言（例如 Python、C++）都可以使用 DOM 来修改网页。但是，JavaScript 会影响我们在 Web 上看到的大多数页面，因此它是了解 DOM 所需的唯一编程语言。
我们已经讨论过房屋、浏览器和倒置的树……但这与制作网站有何关系？
什么是网页设计中的 DOM？
在网页设计中，JavaScript 用于控制网页的行为。DOM 将 JavaScript 链接到源 HTML 代码，这使 JavaScript 能够在单个 HTML 元素上执行其功能。这种 JavaScript-HTML 交互创造了交互式网页设计的体验。
对象不仅有利于组织数据——而且它们还允许程序轻松访问其中的特定数据。
回到我们的房子对象，假设您想编辑特定房子的“kitchen_countertop”元素。为此，您的程序只需要找到有问题的房子，沿着对象树向下遍历到厨房对象，然后将“kitchen_countertop”元素从“quartz”更改为“marble”。不错的选择。
同样，DOM 为 JavaScript 提供了对 HTML 文档中几乎所有元素的访问，从整个页面到一小段文本。
每当页面加载后网页上发生某些事情时（例如，单击按钮提交表单或元素更改大小/颜色），这是通过 DOM 定位特定元素并进行更改的 JavaScript 代码。JavaScript 代码可以位于其自己的 .js 文件中，甚至可以位于 HTML 文档本身中。
有关 DOM 的基本示例，请尝试来自 W3Schools 的演示。左侧面板包含源代码，右侧面板显示作为网页显示的代码。按下的那一刻点击我！，以下 JavaScript 运行。
document.getElementById('demo').style.display='block’在上面的代码中：
document是 JavaScript 通过 DOM 定位 HTML 文件对象的方式。它告诉浏览器，“我想进入 HTML 文件进行更改。”
.getElementByID('demo')以 ID 为“demo”的页面元素为目标。这是 JavaScript 想要修改的元素。为了到达那里，JavaScript 从最高的 <html> 标签开始，然后遍历 DOM 直到它遇到带有文本“Hello JavaScript！”的元素。
.style.display='block'是动作。一旦找到目标元素，它就会显示文本。
当用户与其交互时，复杂的网页会执行这些调用数百次。JavaScript 每次都使用 DOM。
DOM：让互联网变得有趣
希望您明白为什么文档对象模型对现代网站如此重要。没有它，JavaScript 将无法以很酷的方式改变网页，我们只有一堆无聊的静态网页。
您永远无需担心自己编写 DOM，因为 Web 浏览器会为您完成所有工作。尽管如此，无论您是在开始重新设计网站时尝试新的页面效果，了解您的在线状态的内部运作情况都是很有用的。
