什么是DOM(Document Object Model)文档对象模型

DOM （Document Object Model，文档对象模型）是一种表示 HTML 和 XML 文档的标准程序接口。通过使用 DOM，可以访问和操作一个文档中的内容。DOM 描述了一个层次化的节点树，允许开发人员添加、修改或删除文档中的任意部分。

DOM 模型分为三个部分：文档结构模型（Document），元素对象模型（Element）和特性对象模型（Attribute）。下面分别讲解每一个部分。

文档结构模型（Document）

在 DOM 中，文档结构模型是最顶层的一个对象，也是 DOM 中最重要的一个组成部分。它代表了整个文档，包括文档的属性、文本内容及其它所有元素。

以下是操作 DOM 文档结构模型的示例代码：

// 获取文档对象模型
const doc = document;

// 获取当前页面的标题
const title = doc.title;

// 修改页面的标题
doc.title = "新标题";

元素对象模型（Element）

元素对象模型是 DOM 树的基本组成部分，它代表了文档中的各个元素。在 DOM 中，元素可以指一个整个 HTML 标签，也可以指标签内的内容。

以下是操作 DOM 元素对象模型的示例代码：

// 获取元素
const element = doc.getElementById('id');

// 获取元素的属性
const attributeValue = element.getAttribute('attr');

// 修改元素的内容
element.innerHTML = "新内容";

特性对象模型（Attribute）

特性对象模型是元素对象模型的一个子集，它表示元素的特定属性或特性。特定属性可以用来设置元素的外观、行为和其它属性。

以下是操作 DOM 特性对象模型的示例代码：

// 获取元素
const img = doc.getElementById('myImage');

// 获取元素属性
const src = img.getAttribute('src');

// 修改元素的属性
img.setAttribute('src', 'newimg.png');

总结来说，DOM 以一种层次化的结构，将文档中的所有元素及其属性表示为对象。这种结构提供了简单易用的 API，可以通过 JavaScript 操作和控制文档的内容和结构，使 JavaScript 与 HTML 页面可以更加紧密地结合。