JavaScript - 文档对象模型 (DOM)

HTML DOM 允许 JavaScript 访问和修改 HTML 元素的内容。JavaScript 可以更改页面中的所有 HTML 元素、属性、CSS 样式。JavaScript 还可以添加、删除 HTML 元素和属性。使用 JavaScript，我们甚至可以在页面中创建新的事件。

每个网页都位于浏览器窗口内，可以将其视为一个对象。

Document 对象表示显示在该窗口中的 HTML 文档。Document 对象具有各种属性，这些属性引用其他对象，这些对象允许访问和修改文档内容。

什么是 DOM？

DOM 是文档对象模型 (Document Object Model) 的缩写。它是一个用于 Core、XML 和 HTML DOM 的编程接口。

它是 W3C（万维网联盟）标准。

DOM 定义了网页或文档的逻辑或树状结构。在树中，每个分支都以一个节点结束，每个节点都包含对象。DOM 方法允许我们以编程方式访问树。使用 DOM 方法，您可以更改文档的结构、内容或样式。

HTML 创建网页的结构，JavaScript 通过操作 HTML 元素向网页添加交互。

JavaScript 无法直接与 HTML 元素交互。因此，每当网页在浏览器中加载时，它都会创建一个 DOM。

因此，文档对象表示显示在该窗口中的 HTML 文档。此外，网页中的每个 iframe 都创建一个新的 DOM。Document 对象具有各种属性，这些属性引用其他对象，这些对象允许访问和修改文档内容。

访问和修改文档内容的方式称为文档对象模型或DOM。对象以层次结构组织。这种层次结构适用于 Web 文档中对象的组织。

以下是一些重要对象的简单层次结构：

存在多个 DOM。以下部分将详细解释这些 DOM 中的每一个，并描述如何使用它们来访问和修改文档内容。

传统 DOM - 这是在早期版本的 JavaScript 语言中引入的模型。所有浏览器都很好地支持它，但它只能访问文档的某些关键部分，例如表单、表单元素和图像。
W3C DOM - 此文档对象模型允许访问和修改所有文档内容，并由万维网联盟 (W3C) 标准化。几乎所有现代浏览器都支持此模型。

根据 W3C，DOM 有三种不同的类型。

如上所述，当网页加载到浏览器窗口中时，它会成为一个文档对象。

之后，JavaScript 可以访问 HTML 元素并在其上执行其他操作。这意味着 JavaScript 可以使用 HTML DOM 与网页交互。

例如，JavaScript 可以使用文档对象对 HTML 元素执行以下操作。

然而，文档对象还有其他用途，我们将在后续章节中介绍。

DOM接口是DOM的实际组件，它们与JavaScript或任何其他编程语言一起工作以操纵网页。它们提供各种方法和属性来交互和操纵网页。

DOM接口列表如下：

打印页面