DOM
DOM是文档对象模型（Document Object Model）的缩写。它是一种用于表示和操作HTML、XML等文档结构的编程接口。在Web开发中，当浏览器加载网页时，它会将HTML文档解析为一个树状的数据结构，这个数据结构就是DOM。每个HTML元素、属性和文本都在DOM树中以节点的形式表示。
DOM层次结构
DOM层次结构是网页元素的层次组织，它类似于一棵树，树的每个节点代表网页上的一个元素（如标签、文本、属性等）。HTML文档的根节点是<html>，其下有<head>和<body>等子节点。
节点类型
DOM中的节点可以分为不同类型，常见的节点类型包括：
- 元素节点（Element nodes）：表示HTML标签，如
<div>、<p>等。 - 文本节点（Text nodes）：表示元素中的文本内容。
- 属性节点（Attribute nodes）：表示元素的属性，如
class、id等。 - 注释节点（Comment nodes）：表示HTML注释，如
<!-- 这是注释 -->。 - 文档节点（Document nodes）：表示整个HTML文档。
操作方法
通过JavaScript等脚本语言，可以使用各种方法来操作DOM：
- 查询和选取元素：例如使用
document.querySelector和document.querySelectorAll来选择元素。 - 修改元素内容：通过
innerHTML、textContent等属性来修改元素的文本内容。 - 修改元素属性：使用
setAttribute和removeAttribute来修改或移除元素的属性。 - 创建、插入和删除元素：使用
document.createElement、element.appendChild等方法来创建、插入和删除元素。
事件处理
DOM允许开发人员为元素添加事件处理程序，以便响应用户的交互：
- 添加事件监听器：使用
addEventListener方法为元素添加事件监听器，如点击、鼠标移入等事件。 - 事件对象：在事件处理程序中，可以访问事件对象，从而获取有关事件的信息，如触发事件的元素、鼠标坐标等。
样式操作
DOM还允许通过JavaScript来操作元素的样式：
- 修改样式属性：使用元素的
style属性来修改其样式属性，如颜色、字体大小等。 - 添加/移除 CSS类：使用
classList属性的add和remove方法来添加或移除元素的CSS类。
