DOM（文档对象模型）允许 JavaScript 访问并修改 HTML 元素的内容。JavaScript 可以改变页面上所有的 HTML 元素、属性和 CSS 样式。JavaScript 还可以添加或移除 HTML 元素和属性。使用 JavaScript，我们甚至可以在页面中创建新的事件。
每个网页都驻留在浏览器窗口内，这可以被认为是一个对象。
文档对象代表在该窗口中显示的 HTML 文档。文档对象有各种属性，这些属性指向其他对象，从而允许访问和修改文档内容。
什么是 DOM？
DOM 是文档对象模型的缩写。它是一种用于核心、XML 和 HTML DOM 的编程接口。
它是 W3C（万维网联盟）的标准。
DOM 定义了网页或文档的逻辑或树状结构。在这个树中，每个分支以一个节点结束，每个节点包含对象。DOM 方法允许程序化访问这个树。利用 DOM 方法，您可以更改文档的结构、内容或样式。
什么是 HTML DOM？
HTML 创建了网页的结构，而 JavaScript 通过操控 HTML 元素向网页添加交互。
JavaScript 不能直接与 HTML 元素互动。因此，每当一个网页加载到浏览器中时，它都会创建一个 DOM。
所以，文档对象代表在该窗口中显示的 HTML 文档。此外，网页中的每个 <iframe> 都会创建一个新的 DOM。文档对象有许多属性，这些属性指向其他对象，这些对象允许访问和修改文档内容。
访问和修改文档内容的方式被称为文档对象模型（DOM）。对象是以层次结构组织的。这种层级结构适用于 Web 文档中对象的组织。
Window 对象 —— 它代表浏览器的当前窗口。它也作为浏览器窗口的全局对象。位于层次结构的顶部，是对象层次结构中最外层的元素。
Document 对象 —— 每个加载到窗口中的 HTML 文档都会成为一个文档对象。文档包含了页面的内容。它用于访问和修改网页元素。
Form 对象 —— 包含在 <form>... 标签内的所有内容构成了表单对象。
表单控件元素 —— 表单对象包含了为此对象定义的所有元素，如文本字段、按钮、单选按钮和复选框。
这里是一个简单的重要对象层次结构示例：
HTML DOM
有几个 DOM 存在。以下部分详细解释了这些 DOM 并描述了如何使用它们来访问和修改文档内容。
传统 DOM —— 这是在早期版本的 JavaScript 语言中引入的模型。所有浏览器都支持得很好，但只能访问文档的某些关键部分，例如表单、表单元素和图像。
W3C DOM —— 这种文档对象模型允许访问和修改所有文档内容，并由万维网联盟（W3C）标准化。此模型几乎被所有现代浏览器支持。
根据 W3C，DOM 有三种不同的类型：
-
-
HTML DOM —— HTML 文档的通用模型。
-
为什么需要 DOM？
正如前面所述，当一个网页加载到浏览器窗口时，它变成了一个文档对象。
之后，JavaScript 可以访问 HTML 元素并对它们执行其他操作。这意味着 JavaScript 可以使用 HTML DOM 与网页进行交互。
例如，JavaScript 可以使用文档对象对 HTML 元素执行以下操作：
然而，文档对象还有其他用途，这将在后续章节中讨论。