JavaScript - 文档对象模型或 DOM

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

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

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

• 窗口对象- 层次结构的顶部。它是对象层次结构的最外层元素。

• 文档对象- 加载到窗口中的每个 HTML 文档都成为一个文档对象。该文档包含页面的内容。

• 表单对象- <form>...</form> 标记中包含的所有内容都设置表单对象。

• 表单控制元素- 表单对象包含为该对象定义的所有元素，例如文本字段、按钮、单选按钮和复选框。

这是一些重要对象的简单层次结构 -

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

• Legacy DOM - 这是在 JavaScript 语言的早期版本中引入的模型。所有浏览器都很好地支持它，但仅允许访问文档的某些关键部分，例如表单、表单元素和图像。

• W3C DOM - 该文档对象模型允许访问和修改所有文档内容，并由万维网联盟 (W3C) 进行标准化。几乎所有现代浏览器都支持该模型。

• IE4 DOM - 此文档对象模型是在 Microsoft Internet Explorer 浏览器版本 4 中引入的。IE 5 及更高版本包括对大多数基本 W3C DOM 功能的支持。

DOM 兼容性

如果您希望编写一个能够根据可用性灵活使用 W3C DOM 或 IE 4 DOM 的脚本，那么您可以使用功能测试方法，该方法首先检查方法或属性是否存在，以确定浏览器是否具有您想要的能力。例如 -

if (document.getElementById) {
   // If the W3C method exists, use it
} else if (document.all) {
   // If the all[] array exists, use it
} else {
   // Otherwise use the legacy DOM
}