JavaScript：DOM 树

JavaScript DOM 树：从零基础到 React 开发

DOM 树是 JavaScript 操作 HTML 页面最重要的基础知识之一。

一、DOM 树是什么？

DOM 全称是 Document Object Model（文档对象模型）。

简单理解：

浏览器会把 HTML 解析成一棵树，JavaScript 可以通过这棵树访问和操作网页。

例如，有下面一段 HTML：

xml 复制代码

<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：

xml 复制代码

<div id="app">
  <h1 class="title">任务管理系统</h1>
  <button>新增任务</button>
</div>

JavaScript：

dart 复制代码

// 根据 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 元素

ini 复制代码

const title = document.querySelector(".title");

// 修改文本
title.textContent = "新的任务管理系统";

// 修改样式
title.style.color = "red";

// 修改属性
title.setAttribute("data-status", "running");

这些操作可以立即改变页面显示效果。

3. 创建和删除 DOM 元素

ini 复制代码

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 事件监听

bash 复制代码

<button id="addBtn">新增任务</button>

ini 复制代码

const button = document.getElementById("addBtn");

button.addEventListener("click", () => {
  alert("点击了新增任务");
});

当用户点击按钮时，浏览器触发 click 事件，JavaScript 执行对应的回调函数。

三、交互演示：JavaScript 如何修改 DOM？

无

四、DOM 树中的父节点、子节点、兄弟节点

这是理解 DOM 树结构的基础。

例如：

bash 复制代码

<div id="parent">
  <p id="first">第一个段落</p>
  <p id="second">第二个段落</p>
</div>

JavaScript：

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

ini 复制代码

const title = document.getElementById("title");

title.textContent = "新标题";

需要手动找到 DOM，再修改 DOM。

React

javascript 复制代码

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 更强调声明式地描述界面。