HTML DOM

引言

DOM 是 Document Object Model 的缩写。借助 DOM，我们可以操作文档。所以，DOM 是一个用于 HTML 和 XML（可扩展标记语言）文档的编程接口。借助 DOM，我们还可以定义文档的逻辑结构，并且可以访问和操作文档。我们可以将 DOM 称为逻辑对象，因为对象之间没有关系。

换句话说，DOM 是一种以结构化分层方式表示网页的方式。通过这种结构化的分层方式，程序员可以轻松地通过滑动来理解网页。借助 DOM，程序员可以轻松地访问和操作 HTML 的标签、ID、类、属性或元素。程序员可以通过使用 DOM 提供的命令或方法来做到这一点。借助 DOM，JavaScript 也可以访问 HTML 和 CSS 的行为。因此，DOM 是一种为与 HTML 或 XML 文档交互而创建的 API。

为什么需要 DOM？

• 借助 HTML，我们可以创建网页的结构，并借助 JavaScript 为网页添加行为。但是 JavaScript 在加载到网页时无法理解文档类型。因此，为了让 JavaScript 理解，DOM 被创建了。
• 我们可以称 DOM 是 HTML 的表示，但它是以不同的格式用于对象的。
• JavaScript 可以非常容易地操作 DOM。在网页中，JavaScript 无法轻易理解标签，例如 `

  `H`

  `，但借助 DOM，它可以轻松理解 h1 对象。
• 如今，JavaScript 可以通过 DOM 的不同函数轻松理解 DOM 对象。

DOM 结构

我们可以将 DOM 表示为树状结构。我们可以使用“结构模型”一词来描述 DOM 的树状结构的表示。我们可以将树的每个分支表示为一个节点，每个节点包含一个对象。在 JavaScript 中，我们可以为节点添加事件监听器来触发给定对象的发生。结构同构是 DOM 最重要的特征。结构同构指出，如果两个 DOM 用于表示同一元素，它们将创建相同的结构模型，具有相同的对象和关系。

为什么称其为对象模型？

文档用于创建模型对象。模型对象包含文档的结构以及对象和文档的行为。对象包含网页的标签和属性。

DOM 的属性

让我们通过以下图表来理解文档的属性和行为以及 DOM 如何操作文档对象。

1. Window 对象：浏览器对象始终位于层次结构顶部。我们也可以称其为用于设置和访问浏览器中所有属性和方法的 API。它由浏览器自动创建。
2. Document 对象：当 HTML 中的文档加载到窗口时，它会自动成为文档对象。文档对象具有各种属性，所有属性都指向其他对象。然后，借助该对象，我们可以访问和修改对象的内容。如果需要访问 HTML 文档的特定对象，那么我们可以通过“document”对象开始访问。**“Document”对象是窗口对象的一个属性。**
3. Form 对象：借助表单对象，我们可以用表单标签表示它。
4. Link 对象：借助链接对象，我们可以用链接标签表示它。
5. Anchor 对象：借助锚点对象，我们可以用 href 标签表示它。
6. 表单控件元素：表单标签中有许多控件元素，这些元素包括字段、按钮、单选按钮、复选框等。

文档对象的方法

有许多方法可以调用文档对象。它们如下。

1. Write("string" )：借助此方法，我们可以将给定的字符串写入文档。getElementById()：借助此方法，我们可以通过给出 ID 值来返回元素。
2. getElementByName()：借助此方法，我们可以返回所有具有相同名称值的元素。
3. getElementByTagName()：借助此方法，我们可以返回所有具有相同标签名的元素。
4. getElementByClassName()：借助此方法，我们可以返回所有具有相同类名的元素。

示例 1

在此示例中，我们将看到 getElementById() 在 HTML 代码中的实现。

输出

示例 2

在此示例中，我们将看到树状结构中的 HTML 元素。

在浏览器内部，上述代码被转换为树状结构。结构如下所示。

DOM 不是什么？

• 我们还可以看到 DOM 不是一种二进制描述。我们不能在 HTML 代码的源代码中编写任何二进制语言。
• 我们不能使用 DOM 来描述 XML 或 HTML 的对象。但在 XML 和 HTML 中，DOM 用作对象。
• 我们不能将 DOM 表示为数据结构集。它用作指定对象表示的接口。
• 借助 DOM，我们无法显示文档中对象的关键性，因为它不包含文档中对象的。信息。

DOM 的级别

DOM 中有许多级别。这些级别如下。

Level 0：在此级别，DOM 提供低级信息集。

Level 1：在此级别，DOM 描述了 HTML 代码的两个主要部分。它们如下。

• Core：在 DOM 中，核心提供了低级接口，用于表示任何结构化文档。
• HTML：在 DOM 中，HTML 提供了更高级别的接口，用于表示任何结构化文档。

Level 2：在 DOM 中，Level 2 有六个部分。它们如下。

• CORE2：借助 core 2，我们可以扩展 DOM Level 1 中定义的 C​​ore 功能。
• VIEWS：借助视图，我们可以让所有程序动态访问和操作文档中的内容。
• EVENTS：在 DOM 中，当用户在网页上做出反应时，脚本就会执行。
• STYLE：借助样式，我们可以让所有程序动态访问并为文档中的内容提供样式。
• TRAVERSAL：借助 Traverse，我们可以对文档内容执行动态遍历。
• RANGE：借助 range，我们可以确定文档中内容的范围。

Level 3：在 DOM 中，Level 3 有五个部分。它们如下。

• CORE 3：借助 core 3，我们可以扩展 DOM Level 2 中定义的 C​​ore 功能。
• LOAD AND SAVE：借助此功能，我们可以将 XML 和 HTML 的内容动态加载到程序中加载到 DOM 文档中。然后它将 DOM 文档保存为序列化后的 XML 文档。
• VALIDATION：借助此功能，我们可以通过确保文档的有效性来更新文档的内容和结构。
• EVENTS：借助此功能，我们可以扩展 DOM Level 2 中指定的事件的功能。
• XPATH：这是一种可以通过它访问 DOM 树的语言。

示例 3

在此示例中，我们将使用 * getElementById() * 方法来操作 DOM。

输出