前言
上一篇《JavaScript篇 09》中，我们攻克了JS的作用域、闭包和this三大难点。至此，你已经完整地学完了JavaScript作为一门编程语言的语法和核心概念。但相信你一直在等待这一刻——之前所有的console.log输出都只在控制台里，我们什么时候才能用JavaScript真正操作网页，实现点击按钮换颜色、点击切换菜单、动态改变页面内容？
现在，这一刻到了。从本篇开始，JavaScript回归它的终极使命：操作网页。在浏览器中，网页被抽象为一棵\”节点树\”——DOM（Document Object Model，文档对象模型）。JavaScript通过DOM API可以访问和修改这棵树上的任意节点——增删改查元素、修改样式、响应事件——所有的网页交互都是基于DOM操作实现的。
本篇作为DOM操作的第一篇，将从DOM的基本概念讲起，然后学习最核心的操作：获取元素、修改内容、修改样式、修改属性。每学一个API，都有可直接运行的实战示例。学完这一篇，你就能写出\”点击按钮改变页面样式\”这样真正有交互的代码了。
本节核心学习内容：
文章目录
- 前言
- 一、DOM是什么
-
- 1.1 从HTML到DOM树
- 1.2 关键的DOM概念
- 1.3 document对象
- 二、获取元素
-
- 2.1 querySelector（推荐）
- 2.2 querySelectorAll（推荐）
- 2.3 传统方法（了解即可）
- 三、修改元素内容
-
- 3.1 textContent：纯文本（推荐）
- 3.2 innerHTML：HTML内容（谨慎使用）
- 3.3 innerText：渲染后的文本（不推荐）
- 3.4 三者的区别对比
- 四、修改元素样式
-
- 4.1 style属性：修改内联样式
- 4.2 classList：操作类名（推荐）
- 五、修改元素属性
-
- 5.1 标准属性
- 5.2 getAttribute / setAttribute
- 5.3 data-* 自定义属性
- 六、综合实战
-
- 6.1 点击按钮切换主题色
- 6.2 动态切换导航激活状态
- 七、常见误区与避坑指南
- 八、核心总结：DOM操作速查表
-
- 获取元素
- 修改内容
- 修改样式
- 修改属性
- 九、专栏订阅
一、DOM是什么
1.1 从HTML到DOM树
当浏览器加载一个HTML页面时，它会做两件事：
每个HTML标签、文本、注释都变成了DOM树上的一个节点：
<html>
<head>
<title>页面标题
