DOM（文档对象模型）

文档对象模型（DOM） 是一个编程接口，用于将 HTML 或 XML 文档的结构表示为对象树。它允许脚本和程序动态访问、修改和操作网页中的元素、属性和内容。DOM 充当网页文档与 JavaScript 等编程语言之间的桥梁，支持交互式和动态的网络体验。

也称为：DOM 树，文档模型

比较

DOM 与 HTML：HTML 是网页的静态标记，而 DOM 则代表文档的结构化和交互式版本。

DOM 与虚拟 DOM：虚拟 DOM（在 React 等框架中使用）是实际 DOM 的轻量级副本，优化了更新和性能。

优点

• 允许动态内容更新，无需重新加载页面。

• 为脚本和自动化提供结构化的元素访问。

• 在所有现代浏览器和网络技术中得到支持。

缺点

• 对 DOM 的直接操作对于大型文档来说可能缓慢且低效。

• 对 DOM 的频繁更新可能导致性能瓶颈。

• 复杂的 DOM 结构可能导致调试和维护困难。

示例

开发人员希望在按钮被点击时更改按钮的文本。使用 JavaScript 和 DOM，他们可以动态实现这一点：

document.getElementById("myButton").addEventListener("click", function() {
    this.textContent = "Clicked!";
});

在这个例子中，当 ID 为 myButton 的按钮被点击时，其文本内容将更改为 "Clicked!"。这展示了 DOM 如何实现与网页元素的实时交互。