Javascript 简明教程
JavaScript - Document Object Model or DOM
HTML DOM 允许 JavaScript 访问和修改 HTML 元素的内容。JavaScript 可以更改页面中的所有 HTML 元素、属性和 CSS 样式。JavaScript 还可以添加、删除 HTML 元素和属性。使用 JavaScript，我们甚至可以在页面中创建新事件。
每个网页都驻留在浏览器窗口内，该浏览器窗口可视为一个对象。
Document 对象表示显示在该窗口中的 HTML 文档。Document 对象具有各种属性，这些属性引用其他对象，用于允许访问和修改文档内容。
What is DOM?
DOM 是文档对象模型的首字母缩写。它是一个用于核心、XML 和 HTML DOM 的编程接口。
它是 W3C（万维网联盟）标准。
DOM 定义了网页或文档的逻辑或树状结构。在树中，每个分支都以一个节点结束，每个节点都包含对象。DOM 方法允许我们以编程方式访问树。使用 DOM 方法，您可以更改文档的结构、内容或样式。
What is HTML DOM?
HTML 创建网页的结构，而 JavaScript 通过操作 HTML 元素为网页添加交互性。
JavaScript 无法直接与 HTML 元素交互。因此，每当网页在浏览器中加载时，它都会创建一个 DOM。
因此，文档对象表示该窗口中显示的 HTML 文档。此外，网页中的每个 iframe 都会创建一个新的 DOM。Document 对象具有各种属性，它们引用其他对象，允许访问和修改文档内容。
访问和修改文档内容的方式称为 Document Object Model 或 DOM 。对象按层次结构组织。此层次结构适用于 Web 文档中对象的组织。
-
Window object − 它表示浏览器的当前窗口。它还用作浏览器窗口的全局对象。它位于层次结构的顶部。它是对象层次结构的最外层元素。
-
Document object − 加载到窗口中的每个 HTML 文档都将成为一个文档对象。该文档包含页面内容。它用于访问和修改网页的元素。
-
Form object − <form>…</form> 标记中包含的所有内容都会设置 form 对象。
-
Form control elements − 表单对象包含为该对象定义的所有元素，例如文本字段、按钮、单选按钮和复选框。
以下是几个重要对象的简单层次结构−
存在多个 DOM。以下几个部分详细说明了每个 DOM，并描述了如何使用这些 DOM 来访问和修改文档内容。
-
The Legacy DOM − 这是在早期版本的 JavaScript 语言中引入的模型。它得到了所有浏览器的良好支持，但只允许访问文档的某些关键部分，例如表单、表单元素和图像。
-
The W3C DOM − 这种文档对象模型允许访问和修改所有文档内容，并由万维网联盟 (W3C) 标准化。此模型得到几乎所有现代浏览器的支持。
根据 W3C，DOM 有三种不同类型。
-
Core DOM - 它是所有文档类型的标准模型。
-
HTML DOM - 它是 HTML 文档的标准模型。
-
XML DOM - 它是 XML 文档的标准模型。
Why is DOM required?
如上所述，当网页被加载到浏览器窗口中时，它将成为一个文档对象。
之后，JavaScript 可以访问 HTML 元素并对它们执行其他操作。这意味着 JavaScript 可以使用 HTML DOM 与网页交互。
例如，JavaScript 可以使用文档对象对 HTML 元素执行以下操作。
-
Access HTML elements
-
Replace HTML elements
-
Add New HTML elements
-
Delete HTML elements
-
更改HTML元素的CSS
-
更改HTML元素的属性
-
向HTML元素添加动画
-
向 HTML 元素添加事件
但是，文档对象还有其他用途，我们将在即将到来的章节中介绍。