DOM（文档对象模型）

DOM，全称为文档对象模型（Document Object Model），是用于HTML、XML等文档的编程接口。它将整个HTML文档抽象为一个树形结构，即DOM树，开发者可以通过访问DOM树的节点来操作HTML文档，例如增加、删除或修改HTML元素和属性。

DOM由W3C定义，是Web页面开发中不可或缺的技术之一。下面我们来详细了解DOM。

DOM树结构

DOM树结构是由HTML文档中所有的元素节点（包括HTML、head、body、p、div、img等等）组成的父子关系树形结构，如下图所示：

DOM节点

DOM中的所有元素都是节点（node），包括元素节点、属性节点、文本节点等。DOM节点具有如下特性：

• 元素节点（element） ：HTML中的标签（如div、p、img等），可以通过tag name来查找。
• 文本节点（text） ：标签中的文本内容，可以使用nodeValue来看到文本内容。
• 属性节点（attribute） ：在HTML标签中的属性（如id、class等），可以使用getAttribute方法来获取。

使用DOM可以通过编程的方式对节点进行访问和操作。例如查询元素、添加元素、移动元素、修改元素等等。

DOM API

DOM提供了一系列的API来操作HTML文档，开发者可以通过这些API来实现对HTML文档的访问和操作。下面我们列出一些常用的DOM API：

• document.getElementById(id) ：通过元素的id获取DOM对象。
• document.getElementsByTagName(tagName) ：通过标签名获取节点列表。
• document.getElementsByClassName(className) ：通过类名获取节点列表。
• element.innerHTML ：获取或修改元素的HTML内容。
• element.className ：获取或修改元素的类名。
• element.getAttribute(name) ：获取元素的属性值。

DOM事件

DOM事件是用户与HTML文档中的元素交互的唯一途径，例如鼠标点击、键盘输入、表单提交等等。DOM事件可以通过注册事件处理程序来实现。

例如以下代码将在点击按钮时触发事件：

<button onclick="alert('Hello World!')">点我</button>

以上代码注册了一个onclick事件处理程序，当用户点击按钮时，将会弹出一个提示框。

小结

DOM是HTML文档的编程接口，它将HTML文档抽象为一个树形结构，提供了丰富的API和事件机制，是Web页面开发中不可或缺的技术之一。