DOM（文档对象模型）是一种用于表示和操作 HTML、XML 和 XHTML 文档的编程接口。它提供了一种结构化的方式来访问和修改文档的内容、样式和结构。
DOM 最早由 W3C（万维网联盟）于 1998 年提出，并在之后的几年中得到了不断发展和完善。DOM 的发明是为了解决 Web 页面交互的需要。在 DOM 出现之前，开发人员通常使用各种特定于浏览器的 API 来操纵文档内容，这导致了代码的兼容性问题。
DOM 的出现使得开发人员能够使用统一的标准接口来操作文档，无论是在客户端 JavaScript 还是服务器端的脚本语言中。它提供了一种树形结构来表示文档，使得开发人员可以轻松地访问和操作文档的各个部分。
“W3C 文档对象模型 (DOM) 是一个与平台和语言无关的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。”
W3C DOM 标准分为 3 个不同的部分：Core DOM - 所有文档类型的标准模型、XML DOM - XML 文档的标准模型、HTML DOM - HTML 文档的标准模型
HTML DOM 是 HTML 的标准对象模型和 编程接口。
它定义：HTML 元素作为对象、所有 HTML 元素 的属性、访问所有 HTML 元素的方法、所有 HTML 元素的事件
DOM 的缺点主要是性能问题：由于 DOM 将整个文档加载到内存中并创建完整的对象树，处理大型文档时可能会导致性能下降。此外，DOM 操作通常需要多次重绘和回流，可能会导致页面闪烁和性能瓶颈。
使用 DOM
要使用 DOM，可以使用 JavaScript 或其他支持 DOM 的编程语言。开发人员可以使用 DOM 提供的方法和属性来遍历和修改文档的元素、样式和内容。例如，可以使用 DOM 来查找元素、添加或删除元素、修改元素的属性和样式，以及处理事件等。
DOM 提供了各种方法和属性，用于访问和操作文档的元素、样式和内容。下面是按照一些常见类别和使用方法对 DOM 方法进行汇总：
元素选择和查找：
getElementById(id): 通过元素 ID 选择一个元素。getElementsByClassName(className): 通过类名选择一组元素。getElementsByTagName(tagName): 通过标签名选择一组元素。querySelector(selector): 通过 CSS 选择器选择一个元素。querySelectorAll(selector): 通过 CSS 选择器选择一组元素。
元素操作和属性修改：
createElement(tagName): 创建一个新元素节点。appendChild(node): 将一个节点作为最后一个子节点添加到父元素中。removeChild(node): 从父元素中移除指定子节点。innerHTML: 获取或设置元素的 HTML 内容。className: 获取或设置元素的类名。style: 获取或设置元素的样式。
事件处理：
addEventListener(event, handler): 向元素添加事件监听器。removeEventListener(event, handler): 从元素移除事件监听器。event.preventDefault(): 阻止事件的默认行为。event.stopPropagation(): 停止事件在 DOM 树中的传播。
DOM 遍历和导航：
parentNode: 获取元素的父节点。childNodes: 获取元素的子节点列表。firstChild: 获取元素的第一个子节点。nextSibling: 获取元素的下一个兄弟节点。previousSibling: 获取元素的上一个兄弟节点。getElementById、getElementsByClassName等方法也可用于元素的导航。
在使用 DOM 时，需要避免频繁的 DOM 操作，尤其是在循环中进行大量的 DOM 操作，这可能会导致性能问题。相反，最好使用缓存机制来减少对 DOM 的访问次数，并尽可能地批量处理 DOM 操作。
以下是一些相关的链接，可供进一步了解 DOM：
