面向初学者的 JavaScript DOM 解释

Source: Dev.to

什么是 DOM？

DOM 代表 文档对象模型。
它是 HTML 文档的树形表示，JavaScript 可以：

• 读取
• 更改
• 添加
• 删除

简而言之，DOM 让 JavaScript 能够控制和操作 HTML 元素。

通过示例理解 DOM

考虑下面的 HTML：

## Hello

Click Me

当浏览器加载此页面时，会把它转换成如下的 DOM 树：

Document
 └── html
     └── body
         ├── h1
         └── button

JavaScript 与这棵 DOM 树交互，而不是直接操作原始 HTML。

为什么 DOM 很重要？

没有 DOM

• 网站是静态的
• 没有交互
• 没有动态更新

有了 DOM

• 按钮响应点击
• 表单进行验证
• 内容在不刷新页面的情况下更新

每个现代网站都在使用 DOM。

DOM 的工作原理

流程很简单：

HTML → DOM 树 → JavaScript 控制 DOM

JavaScript 可以：

• 选取元素
• 更改文本或样式
• 添加或删除元素
• 监听事件（click、input、submit）

常用的 DOM 方法

选取元素

document.getElementById("title");
document.querySelector(".box");

更改内容

document.getElementById("title").innerText = "Welcome to DOM";

更改样式

document.getElementById("title").style.color = "blue";

处理事件

button.addEventListener("click", () => {
  alert("Button clicked!");
});

操作类名

element.classList.add("active");
element.classList.remove("active");

DOM 的实际应用

• 表单验证
• 切换按钮（例如暗黑模式）
• 模态框和下拉菜单
• 动态内容加载
• 单页应用（SPA）

即使是 React 等框架，也建立在 DOM 概念之上（虚拟 DOM）。

学完 DOM 后接下来该学什么？

• DOM 事件（click、input、submit）
• ES6 JavaScript
• 异步 JavaScript（Promise、Fetch API）
• React.js