DOM 简介

JavaScript HTML DOM

HTML DOM (Document Object Model) 是一个用于 Web 文档的编程接口。它允许 JavaScript 动态地访问、创建和修改 HTML 元素的内容、结构和样式。

HTML DOM（文档对象模型）

当网页加载时，浏览器会解析 HTML 并创建一个内存中的表示，称为文档对象模型（DOM）。这个模型将页面表示为一个结构化的对象树。

HTML DOM 模型被构建为一个对象树：

将您的 HTML 文档想象成一棵家谱。<html> 元素是根。它有子节点，如 <head> 和 <body>。这些节点又可以有自己的子节点（例如，<body> 可能包含一个 <p> 和一个 <div>）。这种层次结构的节点就是 JavaScript 如何“看到”和导航页面的方式。每个 HTML 元素、文本片段或注释都成为这棵树中的一个节点。

利用 DOM，JavaScript 获得了创建动态和交互式网页的能力。它可以：

• 改变元素的文本内容和 HTML 结构。
• 修改属性（如图像的 src 或链接的 href）以及 data-* 属性。
• 修改 CSS 样式以动态改变外观。
• 移除现有的 HTML 元素和属性。
• 向页面添加新的 HTML 元素和属性。
• 使用事件监听器（event listeners）响应用户交互（如点击、鼠标移动、按键）和其他浏览器事件。
• 创建和分派自定义事件。

您将学到什么

在本教程的后续章节中，您将学到：

• 如何使用各种方法（例如，getElementById、querySelector、querySelectorAll）查找和选择 HTML 元素。
• 如何读取和修改 HTML 元素的内容（例如，textContent、innerHTML）和属性。
• 如何动态更改元素的 CSS 样式。
• 如何使用 addEventListener 有效地处理 DOM 事件。
• 如何从 DOM 树中创建、添加和移除 HTML 元素。

什么是 DOM？

DOM 是由 W3C (World Wide Web Consortium) 和 WHATWG (Web Hypertext Application Technology Working Group) 定义的标准。它提供了一种程序与 Web 文档交互的通用方式。

DOM 定义了一个访问文档的标准：

“W3C 文档对象模型 (DOM) 是一个平台和语言中立的 接口，它允许程序和脚本动态地访问和更新文档的 内容、结构和样式。”

历史上，W3C DOM 标准被分为几个部分来看待。虽然对于主要使用 HTML 的 Web 开发者来说，这些区别现在不太被强调，但概念上的分离曾是：

• 核心 DOM：为任何结构化文档提供了通用模型。
• XML DOM：专门用于 XML 文档。
• HTML DOM：专为 HTML 文档定制，这是我们 Web 开发的主要重点。

现代 Web 开发主要与 HTML DOM 交互，HTML DOM 集成了使 HTML 文档操作直观且强大的功能。

什么是 HTML DOM？

HTML DOM 是一个标准的面向对象模型和 HTML 编程接口。它定义了：

• 将 HTML 元素表示为对象，每个对象都有自己的属性（properties）和方法（methods）。
• 表示这些元素的属性（attributes）和内容的属性（properties）（例如，element.id、element.className、element.textContent）。
• 操作这些元素的方法（methods）（例如，element.appendChild()、element.setAttribute()、element.querySelector()）。
• 这些元素上发生的事件（events）（例如，‘click’、‘mouseover’、‘submit’）以及响应这些事件的机制。

换句话说：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。