DOM 操作入门

DOM（Document Object Model，文档对象模型）是浏览器将 HTML 文档解析成的树形结构。JavaScript 通过 DOM 来读写页面上的任何内容——修改文字、调整样式、添加或删除元素。

DOM 是什么

浏览器加载 HTML 后，并不是把 HTML 源码记在内存里，而是构建了一棵节点树：

html 
<!DOCTYPE html>
<html>
<head>
  <title>我的页面</title>
</head>
<body>
  <h1>标题</h1>
  <p>一段文字</p>
</body>
</html>

对应的 DOM 树：

plaintext 
document
 └── html
      ├── head
      │    └── title
      │         └── "我的页面"
      └── body
           ├── h1
           │    └── "标题"
           └── p
                └── "一段文字"

这棵树中的每一个节点都可以被 JavaScript 访问和修改。document 是这棵树的根，代表整个页面。

document 对象

document 是浏览器提供的一个全局对象，它是 JavaScript 操作页面的入口：

javascript 
console.log(document.title); // 页面标题
console.log(document.body);  // <body> 元素

浏览器开发者工具（F12）的 Console 中可以直接输入这些命令来探索当前页面的 DOM 结构。

节点类型

DOM 树中常见的三种节点：

节点类型示例nodeType
元素节点<h1>、<div>、<p>1
文本节点”标题”、“一段文字”3
注释节点<!-- 注释 -->8

大多数情况下我们操作的是元素节点。

第一个 DOM 操作

创建一个 HTML 文件，尝试修改页面内容：

html 
<!DOCTYPE html>
<html lang="zh-CN">
<body>
  <h1 id="title">原始标题</h1>
  <p class="content">原始文字</p>

  <script>
    // 修改标题文字
    const title = document.getElementById('title');
    title.textContent = '新标题';

    // 修改段落文字和颜色
    const content = document.querySelector('.content');
    content.textContent = '这段文字被 JavaScript 修改了';
    content.style.color = '#2563eb';
  </script>
</body>
</html>

核心概念速览

接下来的三个章节分别深入讲解 DOM 的三大核心能力：

  1. 选择元素 — querySelector、getElementById 等方法找到你想操作的元素
  2. 修改内容和属性 — 改变文字、HTML、class、style、data 属性等
  3. 创建与删除 — 动态添加新元素或移除已有元素

这三个能力组合起来，就是动态网页开发的全部基础。

DOMContentLoaded — 何时执行

JavaScript 代码操作 DOM 之前，需要确保 DOM 已经构建完毕。使用 defer 属性的 <script> 标签会自动在 DOM 就绪后执行：

html 
<script src="app.js" defer></script>

或者在 JavaScript 中监听事件：

javascript 
document.addEventListener('DOMContentLoaded', () => {
  // 这里的代码在 DOM 就绪后执行
  console.log('DOM 已就绪');
});

DOMContentLoaded 在 HTML 完全加载和解析完成后触发，不需要等待图片、样式表等资源。