JavaScript DOM 树：从零基础到 React 开发
DOM 树是 JavaScript 操作 HTML 页面最重要的基础知识之一。
一、DOM 树是什么？
DOM 全称是 Document Object Model（文档对象模型）。
简单理解：
浏览器会把 HTML 解析成一棵树，JavaScript 可以通过这棵树访问和操作网页。
例如，有下面一段 HTML：
<html>
<body>
<div id="app">
<h1>任务管理系统</h1>
<p>当前有 3 个任务</p>
<button>新增任务</button>
</div>
</body>
</html>
浏览器会将它解析成类似下面的 DOM 树：
你会发现，它和后端经常使用的树形数据结构非常相似。
document：整个 HTML 文档的入口。div：父节点。h1、p、button：div的子元素。- 每个 HTML 元素都对应 DOM 中的一个元素节点。
二、JavaScript 如何操作 DOM？
重点只需要掌握四步：
-
查找元素 — 找到你要操作的 DOM 节点
-
修改元素 — 修改文字、属性或样式
-
创建与删除元素 — 动态更新网页结构
-
监听事件 — 响应用户点击、输入等行为
1. 查找 DOM 元素
HTML：
<div id="app">
<h1 class="title">任务管理系统</h1>
<button>新增任务</button>
</div>
JavaScript：
// 根据 id 查找
const app = document.getElementById("app");
// 根据 CSS 选择器查找第一个匹配元素
const title = document.querySelector(".title");
// 查找所有 button
const buttons = document.querySelectorAll("button");
最常用的是：
| 方法 | 作用 |
|---|---|
getElementById("app") | 根据 ID 查找元素 |
querySelector(".title") | 查找第一个匹配的元素 |
querySelectorAll("button") | 查找所有匹配的元素 |
2. 修改 DOM 元素
const title = document.querySelector(".title");
// 修改文本
title.textContent = "新的任务管理系统";
// 修改样式
title.style.color = "red";
// 修改属性
title.setAttribute("data-status", "running");
这些操作可以立即改变页面显示效果。
3. 创建和删除 DOM 元素
const app = document.getElementById("app");
// 创建新的 DOM 元素
const p = document.createElement("p");
// 设置文本
p.textContent = "新增任务成功";
// 插入 DOM 树
app.appendChild(p);
// 删除元素
p.remove();
理解这里的核心：
createElement() 创建节点，appendChild() 将节点插入 DOM 树，remove() 删除节点。
4. DOM 事件监听
<button id="addBtn">新增任务</button>
const button = document.getElementById("addBtn");
button.addEventListener("click", () => {
alert("点击了新增任务");
});
当用户点击按钮时，浏览器触发 click 事件，JavaScript 执行对应的回调函数。
三、交互演示：JavaScript 如何修改 DOM？
无
四、DOM 树中的父节点、子节点、兄弟节点
这是理解 DOM 树结构的基础。
例如：
<div id="parent">
<p id="first">第一个段落</p>
<p id="second">第二个段落</p>
</div>
JavaScript：
const first = document.getElementById("first");
// 获取父元素
console.log(first.parentElement);
// 获取下一个兄弟元素
console.log(first.nextElementSibling);
// 获取父元素的所有子元素
console.log(first.parentElement.children);
| 属性 | 含义 |
|---|---|
parentElement | 父元素 |
children | 所有子元素 |
firstElementChild | 第一个子元素 |
nextElementSibling | 下一个兄弟元素 |
previousElementSibling | 上一个兄弟元素 |
注意，children 只包含元素节点，而 childNodes 还可能包含文本节点、注释节点等。
五、DOM 与 React 有什么关系？
这一部分对你后面学习 React 特别重要。
原生 JavaScript
const title = document.getElementById("title");
title.textContent = "新标题";
需要手动找到 DOM，再修改 DOM。
React
import { useState } from "react";
function App() {
const [title, setTitle] = useState("旧标题");
return (
<div>
<h1>{title}</h1>
<button onClick={() => setTitle("新标题")}>
修改标题
</button>
</div>
);
}
React 不需要你手动调用 getElementById() 更新标题。
你只需要修改 title 状态，React 就会根据新状态更新对应的页面内容。
核心区别：原生 JavaScript 通常是命令式操作 DOM，React 更强调声明式地描述界面。
