DOM（Document Object Model）是一种用于表示文档结构的对象模型，它定义了访问和操作 HTML 文档的标准方式。通过 DOM，开发者可以使用 JavaScript 来动态地改变页面内容、结构和样式。
什么是 DOM？
在 HTML 文档中，每个元素、属性、文本都被表示为一个节点（Node），这些节点组成了一个树状结构，称为 DOM 树。DOM 树中的每个节点都是一个对象，可以通过 JavaScript 来访问和操作。
DOM 提供了一组 API，可以用来查询、创建、删除和修改 DOM 树中的节点。通过这些 API，开发者可以实现页面的动态交互效果，例如点击按钮弹出对话框、改变文本内容、添加新元素等。
DOM 节点
DOM 节点分为几种不同类型，常见的节点类型包括：
- 元素节点（Element Node）：代表 HTML 元素，如
<div>、<p>、<a>等。 - 文本节点（Text Node）：代表文本内容，如
<p>这是文本</p>中的 “这是文本”。 - 属性节点（Attribute Node）：代表 HTML 元素的属性，如
<a href="https://www.example.com">中的 “href”。
DOM 操作
通过 JavaScript 可以对 DOM 进行各种操作，常见的操作包括：
查询元素：可以通过 ID、类名、标签名等方式来查询 DOM 中的元素。
-- -- -- ---- ----- ----------- - ------------------------------------- -- -------- ----- ------------------- - ------------------------------------------- -- --------- ----- ----------------- - -------------------------------------
创建元素：可以使用
document.createElement()方法来创建新的 DOM 元素。----- ---------- - ------------------------------
添加元素：可以使用
appendChild()方法将新创建的元素添加到 DOM 中。----- ------------- - ---------------------------------- --------------------------------------
修改元素：可以使用
innerHTML、innerText、setAttribute()等方法来修改元素的内容和属性。----- ------- - ------------------------------------- ----------------- - ------ ----------------------------- ------------
删除元素：可以使用
removeChild()方法来删除 DOM 中的元素。----- --------------- - ------------------------------------------- --------------------------------------------------------
以上是 DOM 的简介和基本操作，下一章节将介绍更多高级的 DOM 操作技巧。