DOM 操作（Document Object Model 操作）HTML 结构和内容进行动态修改

本文链接：https://blog.youkuaiyun.com/getapi/article/details/146128951

DOM 操作（Document Object Model 操作） 是指通过编程方式（通常使用 JavaScript）对网页的 HTML 结构和内容进行动态修改 的过程。DOM 是浏览器将 HTML 文档解析后生成的一棵“树状结构”，每个 HTML 标签、属性、文本内容都会转化为树中的一个节点（Node）。通过操作这棵树，开发者可以动态地改变页面的内容、样式、结构或响应用户交互。

核心概念

DOM 树
浏览器将 HTML 解析为一个树形结构，例如：

<html>
  <head>...</head>
  <body>
    <div id="container">
      <p>Hello World</p>
    </div>
  </body>
</html>

对应的 DOM 树结构：

- document
  └─ html
     ├─ head
     └─ body
        └─ div#container
           └─ p
              └─ "Hello World"

节点（Node）
DOM 树中的每个组成部分都是一个节点，包括：
- 元素节点：如 <div>、<p>。
- 属性节点：如 id="container"。
- 文本节点：如 "Hello World"。

为什么需要 DOM 操作？

动态更新页面：无需刷新页面即可修改内容（如 Ajax 数据加载）。
用户交互：响应点击、输入等事件（如表单验证、弹窗）。
动态样式：根据条件改变元素的 CSS 样式（如高亮、动画）。
数据绑定：将数据动态渲染到页面（如 Vue/React 框架底层原理）。

常见的 DOM 操作

1. 访问元素

通过 id、class、标签名 或 CSS 选择器获取元素：

// 通过 id 获取
const element = document.getElementById("container");

// 通过 class 获取（返回类数组）
const elements = document.getElementsByClassName("list-item");

// 通过 CSS 选择器获取
const queryElement = document.querySelector(".button.primary");

2. 修改内容

改变元素的文本或 HTML 内容：

const p = document.querySelector("p");
p.textContent = "New text"; // 修改文本内容
p.innerHTML = "<strong>Bold text</strong>"; // 修改 HTML 内容

3. 添加/删除节点

动态创建或移除元素：

// 创建新元素
const newDiv = document.createElement("div");
newDiv.textContent = "Dynamic content";

// 添加到 DOM 中
document.body.appendChild(newDiv);

// 移除元素
const oldElement = document.getElementById("obsolete");
oldElement.parentNode.removeChild(oldElement);

4. 操作属性

修改元素的属性（如 class、src、disabled）：

const button = document.querySelector("button");
button.setAttribute("disabled", true); // 设置属性
button.removeAttribute("disabled");    // 移除属性

// 直接操作 class
button.classList.add("active");
button.classList.remove("hidden");

5. 样式操作

直接修改 style 属性或切换 CSS 类：

const box = document.getElementById("box");
box.style.backgroundColor = "red"; // 直接修改样式
box.style.display = "none";        // 隐藏元素

// 通过 class 控制样式
box.classList.add("highlight");

6. 事件监听

绑定用户交互事件（如点击、输入）：

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

DOM 操作的性能问题

重绘（Repaint）与重排（Reflow）：频繁修改 DOM 或样式会触发浏览器重新计算布局和渲染，影响性能。
- 优化方法：
  1. 批量操作 DOM（如使用 DocumentFragment）。
  2. 避免频繁读写交替（如先读取所有需要的数据，再批量修改）。
  3. 使用 classList 替代直接操作 style 属性。

DOM vs. BOM

DOM：专注于操作网页内容（HTML/XML 文档）。
BOM（Browser Object Model）：操作浏览器窗口、导航、历史记录等（如 window.location、window.alert()）。

示例：动态列表渲染

// HTML: <ul id="list"></ul>

// JavaScript
const list = document.getElementById("list");
const items = ["Apple", "Banana", "Orange"];

items.forEach(item => {
  const li = document.createElement("li");
  li.textContent = item;
  list.appendChild(li);
});