从零开始学前端 | 第十六章：DOM 操作入门-平芜编程栈

本章定位

前面几章里，你已经逐步掌握了 JavaScript 的基础逻辑能力。

你已经学习了：

JavaScript 是什么，代码如何运行。
变量、数据类型与运算。
条件判断与循环。
函数与代码复用。
数组与对象。

到这里，你已经能写出不少“会处理数据”的代码了。

例如：

计算总价
判断成绩等级
处理一组课程数据
组织一个用户对象

但如果这些逻辑始终只停留在控制台里，你会很快发现一个问题：

页面上的内容到底什么时候才能真正被 JavaScript 改掉？

比如：

点击按钮后修改标题文字
给某个卡片加上高亮状态
动态新增一个列表项
根据数据把内容显示到页面上

这些事情，已经不只是“处理值”了，而是开始真正碰到网页本身。

这时候，我们就要进入一个前端非常关键的主题：

DOM 操作

这一章要解决的核心问题是：

JavaScript 到底是怎样找到页面元素、修改页面内容，并让浏览器把变化展示出来的。

本章学习目标

学完这一章后，你应该能做到：

理解什么是 DOM，以及 DOM 和网页页面之间的关系。
理解为什么页面会随着 JavaScript 改变。
掌握 DOM 操作最基础的流程：先找到元素，再修改它。
学会使用document.getElementById和document.querySelector获取元素。
学会修改元素文本内容和基础样式。
学会创建元素并插入页面。
能完成“点击按钮修改标题”“动态新增列表项”“切换卡片高亮状态”这类基础练习。

一、为什么 JavaScript 终于能“碰到页面了”

在前面的学习中，你写过不少 JavaScript 代码。

但大多数结果，可能都是通过：

console.log(...)

打印到控制台里。

这一步当然很重要，因为它帮你先把逻辑学明白了。

但真实的前端开发，并不只是让代码在控制台输出结果，而是要让这些结果：

出现在页面上
改变页面内容
改变页面样式
和用户操作产生互动

也就是说，从这一章开始，JavaScript 不再只是“处理数据”，而是开始真正参与：

页面结构和页面展示的变化。

这就是 DOM 操作的重要意义。

二、什么是 DOM

DOM 是Document Object Model的缩写，中文通常叫：

文档对象模型

第一次看到这个名字时，很多初学者会觉得有点抽象。

其实你现在可以先这样理解：

DOM 是浏览器把网页内容整理成的一棵“可操作的页面结构树”。

1. 浏览器看到的，不只是你写的 HTML 文本

比如你写了一段 HTML：

<body><h1>欢迎来到前端世界</h1><p>这是第一段介绍文字。</p><button>点我一下</button></body>

你在编辑器里看到的是一段 HTML 代码。

但浏览器为了把它显示出来，并让 JavaScript 能操作它，通常会把它理解成更像下面这样的结构：

body
- h1
- p
- button

这就是一种非常简化的 DOM 理解方式。

2. 为什么 DOM 可以理解成“页面结构树”

因为页面里的元素往往存在层级关系。

例如：

body下面有标题、段落、按钮
ul下面有多个li
div里面可能还有别的子元素

这种“父元素 - 子元素”的关系，很适合被理解成一棵树。

3. DOM 和页面是什么关系

你可以先记住一句很重要的话：

DOM 不是另一套和页面无关的东西，DOM 就是浏览器用来表示当前页面结构的一种方式。

正因为浏览器把页面整理成了 DOM，JavaScript 才能：

找到某个元素
修改它的文本
修改它的样式
新增或删除元素

三、为什么页面会随着 JavaScript 改变

这个问题特别关键。

很多纯小白第一次接触 DOM 时，最容易卡住的一点就是：

为什么我改了一段 JavaScript，页面真的就变了？

你现在可以先用一个很直观的流程来理解。

1. 浏览器先解析 HTML

浏览器拿到 HTML 后，会先把页面结构读出来，并整理成 DOM。

2. 浏览器根据 DOM 把页面显示出来

也就是说，页面最终展示出来，是建立在 DOM 这套结构基础上的。

3. JavaScript 修改的是 DOM

当 JavaScript 找到某个元素，并修改它的内容、样式或结构时，本质上是在改 DOM。

4. DOM 一变，页面展示就会跟着变

因为页面本来就是基于 DOM 渲染出来的，所以当 DOM 变化后，浏览器就会把最新结果反映到页面上。

你可以先把这个过程记成一句很实用的话：

JavaScript 不是直接在“屏幕像素”上乱改，而是通过修改 DOM，让浏览器重新把变化显示出来。

四、DOM 操作的核心流程

这一章最重要的操作思路，其实非常简单。

可以概括成一句话：

先找到元素，再修改它。

很多 DOM 初学者的问题，本质上都出在这两步没有分清。

1. 第一步：找到页面元素

例如：

找到标题
找到按钮
找到列表
找到卡片

2. 第二步：对这个元素做操作

例如：

改文本
改颜色
改类名
新增一个子元素

3. 有些场景还会多一步

如果是动态创建新元素，通常会变成：

先找到目标容器
再创建新元素
再把新元素放进去

这一套流程，后面你会反复用到。

五、如何获取页面元素

要操作 DOM，第一步通常都是先拿到元素。

在当前阶段，最适合纯小白优先掌握的有两种方式：

document.getElementById
document.querySelector

六、`document`是什么

在浏览器环境里，document可以先理解成：

当前网页文档本身。

也就是说，你后面写的很多 DOM 代码，都会从document开始。

例如：

document.getElementById("page-title");document.querySelector(".card");

你可以把它们理解成：

让浏览器在当前页面里帮你找某个元素。

七、`getElementById`：通过`id`找元素

这是非常适合新手入门的获取方式。

1. 基本写法

document.getElementById("元素的 id");

例如 HTML 里有：

<h1id="page-title">欢迎来到前端世界</h1>

那你就可以在 JavaScript 里写：

constpageTitle=document.getElementById("page-title");console.log(pageTitle);

2. 为什么它适合初学者

因为它非常直白：

先给元素一个id
再通过这个id去找它

这种方式很容易建立“HTML 和 JavaScript 对上号”的感觉。

3.`id`的一个基础特点

在一个页面里，id通常应该尽量保持唯一。

也就是说：

一个id最好只对应一个元素。

这样你后面找元素时会更清楚。

八、`querySelector`：按选择器找元素

除了getElementById，还有一个非常常用的方法是：

document.querySelector(...)

1. 它和 CSS 选择器很像

如果你前面学过 CSS 选择器，这里会感觉很熟悉。

例如：

document.querySelector("#page-title");document.querySelector(".card");document.querySelector("button");

它们分别表示：

找id是page-title的元素
找类名是card的元素
找第一个button元素

2. 当前阶段怎么选

你现在可以先这样记：

1. 如果已经明确用`id`找一个元素

优先可以先用：

getElementById

2. 如果想用更灵活的选择器方式

可以用：

querySelector

这两种方式，当前阶段先掌握到能熟练用起来就很好。

九、获取元素后，最常做的第一件事：修改文本

纯小白第一次做 DOM，最适合先从“改文字”开始。

因为这个效果最直观，也最容易看出页面变化。

1. 使用`textContent`

textContent可以先理解成：

元素里的文本内容。

例如：

<h1id="page-title">欢迎来到前端世界</h1>

constpageTitle=document.getElementById("page-title");pageTitle.textContent="标题已经被 JavaScript 修改了";

页面上的标题文字就会发生变化。

2. 为什么初学阶段优先用`textContent`

因为它很直接，也更适合入门：

读取文本方便
修改文本方便
不容易一下子把内容结构搞复杂

当前阶段先把：

找到元素，然后改textContent

这件事练熟，已经非常有价值。

3. 一个完整的小例子

<h1id="page-title">欢迎来到前端世界</h1><script>constpageTitle=document.getElementById("page-title");// 找到标题元素后，直接修改它的文本内容pageTitle.textContent="这是 JavaScript 修改后的标题";</script>

只要页面加载时这段代码执行，标题就会立刻改变。

十、获取元素后，第二类常见操作：修改样式

除了改文字，另一个非常常见的 DOM 操作就是改样式。

1. 直接使用`style`

例如：

<pid="intro-text">欢迎来到 DOM 学习阶段。</p><script>constintroText=document.getElementById("intro-text");// 直接修改元素的内联样式，让变化更容易观察introText.style.color="#409eff";introText.style.fontSize="24px";</script>

这段代码会直接改变这段文字的颜色和字体大小。

2. 为什么有些样式名和 CSS 里不完全一样

例如在 CSS 里你写的是：

font-size background-color

但在 JavaScript 的style里，通常会写成：

fontSize backgroundColor

也就是说，很多样式名会改成：

小驼峰写法

这点是初学者很容易踩的坑，后面要慢慢习惯。

3. 什么时候直接改`style`比较合适

初学阶段，为了快速看到变化，直接改style很适合练手。

因为它最直观。

但以后页面复杂起来时，你会越来越常用“切换类名”的方式来统一控制样式。

当前阶段先不要有负担，先把“找到元素后能改样式”这件事练熟就很好。

十一、创建元素并插入页面

DOM 操作不只是“改已有内容”，还可以：

动态创建新元素，再把它放进页面里。

这一步特别重要，因为以后很多列表、评论区、消息区，本质上都在做类似事情。

1.`createElement`：创建一个新元素

例如：

constnewItem=document.createElement("li");

这表示：

创建了一个新的li元素。

2. 先给新元素填上内容

例如：

newItem.textContent="这是一个新列表项";

3. 再把它放到页面里

例如页面中原本有：

<ulid="todo-list"></ul>

那你就可以这样插入：

consttodoList=document.getElementById("todo-list");todoList.appendChild(newItem);

你可以先把appendChild理解成：

把这个新元素追加到目标元素的最后面。

4. 一个最小完整例子

<ulid="todo-list"></ul><script>consttodoList=document.getElementById("todo-list");constnewItem=document.createElement("li");// 先创建元素，再补内容，最后插入到页面里newItem.textContent="学习 DOM 基础";todoList.appendChild(newItem);</script>

页面中就会出现一个新的列表项。

十二、一个完整示例：点击按钮后修改标题文本

下面我们来做一个非常适合纯小白入门的完整示例。

目标是：

点击按钮后，让标题文字发生变化。

注意：这里我们会先用最容易理解的写法，让你先体验 DOM 变化本身。下一章会系统学习事件机制。

1. 示例代码

<h1id="page-title">欢迎来到前端世界</h1><buttonid="change-title-button">修改标题</button><script>constpageTitle=document.getElementById("page-title");constchangeTitleButton=document.getElementById("change-title-button");// 先体验“点击后执行一段 DOM 修改代码”changeTitleButton.onclick=function(){pageTitle.textContent="标题已经被 JavaScript 修改了";};</script>

2. 这段代码在做什么

你可以按下面顺序理解：

1. 先找到标题元素

constpageTitle=document.getElementById("page-title");

2. 再找到按钮元素

constchangeTitleButton=document.getElementById("change-title-button");

3. 当按钮被点击时，修改标题文本

pageTitle.textContent="标题已经被 JavaScript 修改了";

这就是一个非常标准的 DOM 入门流程：

找元素 -> 在合适时机修改它

十三、一个完整示例：动态新增一个列表项

这一次，我们练的是“创建元素并插入页面”。

目标是：

点击按钮后，往列表里新增一项。

1. 示例代码

<ulid="todo-list"><li>学习 HTML</li><li>学习 CSS</li></ul><buttonid="add-item-button">新增列表项</button><script>consttodoList=document.getElementById("todo-list");constaddItemButton=document.getElementById("add-item-button");letnextItemNumber=3;addItemButton.onclick=function(){constnewItem=document.createElement("li");// 每点击一次，就创建一个新的列表项并追加到列表末尾newItem.textContent=`学习任务${nextItemNumber}`;todoList.appendChild(newItem);nextItemNumber+=1;};</script>

2. 这个例子串起了哪些知识

它已经同时用到了：

获取元素
创建元素
修改文本
把元素插入页面
变量和数字递增

3. 为什么这个练习很重要

因为它开始让你真正体会到：

页面内容不是只能写死在 HTML 里，也可以由 JavaScript 动态加进去。

这对后面学习列表渲染、接口数据展示非常重要。

十四、一个完整示例：点击按钮切换卡片高亮状态

这一次我们来练“改样式”。

目标是：

点击按钮后，让卡片进入或退出高亮状态。

1. 示例代码

<style>.card{width:280px;padding:20px;margin-bottom:12px;border:2px solid #dcdfe6;border-radius:12px;background-color:#ffffff;}.card.highlight{border-color:#409eff;background-color:#ecf5ff;}</style><divid="user-card"class="card">这是一个前端学习卡片</div><buttonid="toggle-highlight-button">切换高亮状态</button><script>constuserCard=document.getElementById("user-card");consttoggleHighlightButton=document.getElementById("toggle-highlight-button");toggleHighlightButton.onclick=function(){// 通过切换类名，让元素在普通样式和高亮样式之间切换userCard.classList.toggle("highlight");};</script>

2. 为什么这个例子值得现在就看看

虽然你这一章的重点还是 DOM 基础，但这个例子会帮你建立一个很实用的认识：

改样式不一定非要一条一条改style，也可以通过切换类名来整体切换视觉状态。

这在真实开发里很常见。

3. 当前阶段怎么理解`classList.toggle`

你现在可以先把它理解成：

如果元素身上没有这个类名，就加上；如果已经有了，就去掉。

所以按钮每点一次，卡片样式就会来回切换。

十五、为什么有时候明明写了代码，页面却没变

这是纯小白在 DOM 学习阶段最常见的困惑之一。

你明明写了获取元素、修改文本的代码，但页面就是没反应。

很多时候，问题都出在下面这些基础点上。

1. 元素没有真正找到

例如：

HTML 里的id写错了
JavaScript 里的选择器写错了
想找的元素根本不存在

这时拿到的结果可能是：

null

后面再去改它，就会报错。

2. 脚本执行得太早了

例如你在元素还没出现在页面结构前，就先执行了：

document.getElementById("page-title");

这时候浏览器还没读到那个元素，自然就找不到。

3. 修改的是错误的属性

例如想改文本，却没有改：

textContent

或者想改样式，却把fontSize写成了font-size。

4. 创建了元素，但没有插入页面

比如你只写了：

constnewItem=document.createElement("li");newItem.textContent="新的列表项";

但没有写：

todoList.appendChild(newItem);

那这个新元素虽然创建出来了，但并没有真正放到页面里。

十六、为什么很多示例把`<script>`放在页面底部

这点非常实用，也特别值得现在就记住。

例如很多入门示例会写成：

<body><h1id="page-title">欢迎来到前端世界</h1><script>constpageTitle=document.getElementById("page-title");</script></body>

这样做的一个直接好处是：

当脚本执行时，前面的 HTML 元素通常已经被浏览器解析出来了。

所以当前阶段，如果你还没系统学习页面加载时机，最稳妥的入门方式之一就是：

先把<script>放在body底部附近。

这样能少踩很多“元素还没找到”的坑。

十七、DOM 操作和前面学过的知识是怎么连起来的

这一章不是孤立的新内容，而是在把前面学过的 JavaScript 逻辑真正接到页面上。

1. 函数会继续出现

例如点击按钮后执行一段逻辑，本质上往往还是在调用函数。

2. 条件判断会继续出现

比如高亮状态切换、显示不同提示，都可能和条件有关。

3. 数组与对象也会继续出现

例如你后面会越来越常见这种场景：

用数组存一组数据
再把这组数据渲染到页面列表中

也就是说：

DOM 不是要替代前面那些知识，而是让前面学过的逻辑真正出现在页面上。

十八、初学者最容易踩的坑

这一章的坑非常典型，而且几乎每个初学者都会踩到。

1. 还没找到元素，就开始改它

DOM 操作最核心的顺序就是：

先找到元素，再修改它。

如果这一步没做好，后面所有操作都会出问题。

2.`id`、类名、选择器写错

这类问题看起来小，但特别常见。

所以写 DOM 代码时，一定要养成对照检查的习惯：

HTML 里写的是什么
JavaScript 里找的是不是同一个名字

3. 把脚本放得太早

如果脚本执行时页面元素还没解析出来，获取元素就可能失败。

当前阶段最实用的做法之一就是：

先把脚本放在页面结构后面。

4. 创建了元素，却忘了插入

很多初学者会以为：

document.createElement("li");

这一步就已经让元素显示出来了。

其实还没有。

你还需要明确把它加到某个父元素下面。

5. 样式属性名照着 CSS 原样写

例如写成：

element.style.font-size="24px";

这就是不对的。

在 JavaScript 里应该写：

element.style.fontSize="24px";

6. 一上来就写很复杂的页面联动

DOM 初学阶段最怕的不是知识少，而是一开始就把练习做得太大。

更稳妥的节奏是：

先改一个文本
再改一个样式
再新增一个元素
再做一个简单点击交互

这样会稳很多。

十九、本章实践练习

这一章最适合做“能立刻看到页面变化”的小练习。

重点不是做得复杂，而是让你真正建立：

JavaScript 可以找到页面元素，并改变页面。

1. 练习 1：实现点击按钮后修改标题文本

请你自己写一个页面，至少包含：

一个标题
一个按钮

点击按钮后，把标题从：

欢迎来到前端世界

改成：

标题已经更新

这个练习重点是：

获取元素
修改textContent
观察页面变化

2. 练习 2：动态新增一个列表项

请创建一个列表和一个按钮。

每点击一次按钮，就往列表末尾新增一个新的li元素。

这个练习重点是：

createElement
textContent
appendChild

3. 练习 3：点击按钮切换卡片高亮状态

请创建：

一个卡片元素
一个按钮

然后通过按钮让卡片在普通状态和高亮状态之间切换。

你可以用：

直接修改style
或者使用类名切换

都可以。

4. 练习 4：把数组数据显示到页面上

如果你想把第十五章和这一章串起来，可以试试这个练习。

例如先准备一个数组：

constcourseNames=["HTML","CSS","JavaScript"];

然后用循环把它们一个个创建成列表项，再插入页面。

这个练习会非常有帮助，因为它已经开始接近真实前端开发里的“数据渲染页面”了。

二十、学习重点提示

这一章最重要的，不是一下子记住所有 DOM API，而是先真正建立正确的操作顺序。

请重点记住：

DOM 是浏览器表示页面结构的一种方式。
页面之所以会随着 JavaScript 改变，是因为 JavaScript 修改了 DOM。
DOM 操作最核心的流程是：先找到元素，再修改它。
getElementById和querySelector是当前阶段最重要的获取元素方式。
修改文本可以先从textContent开始。
创建元素后，别忘了把它插入页面。
别一开始就挑战复杂交互，先做小而清楚的练习。

如果你只记一句话，请记住：

DOM 操作的核心，不是背很多方法，而是先知道你要改哪个元素，然后用合适的方法改它。

二十一、本章小结

这一章，你已经从“写 JavaScript 逻辑”真正走到了“让 JavaScript 改变页面”。

你已经学习了：

什么是 DOM
为什么页面会随着 JavaScript 改变
如何获取页面元素
如何修改文本内容
如何修改基础样式
如何创建元素并插入页面
如何完成标题修改、列表新增、卡片高亮这类基础 DOM 练习

这一步非常关键。

因为从这一章开始，JavaScript 不再只是停留在控制台里，而是开始真正作用到网页界面本身。

后面你继续学习事件、异步请求、组件开发时，DOM 思维都会反复出现。

可以说：

DOM 是前端从“逻辑代码”走向“页面交互”的第一座桥。

二十二、课后思考题

请你思考下面几个问题：

为什么说浏览器不是直接操作你写的 HTML 文本，而是通过 DOM 理解页面？
为什么 DOM 操作最关键的第一步通常都是“先找到元素”？
为什么创建了元素之后，还需要把它插入页面，用户才能看到？
为什么很多 DOM 初学错误，都和选择器写错或脚本执行时机有关？
为什么说“把数组数据渲染到页面上”会成为后面非常常见的一类任务？

建议你用自己的话把答案写下来。只要你能把这些问题说明白，说明你已经真正开始理解 DOM 在前端里的基础角色了。

二十三、下一章预告

下一章我们会继续学习：

从零开始学前端 | 第十七章：事件机制与交互逻辑

到那时，你会系统学习“用户的点击、输入、提交，是怎样触发 JavaScript 执行的”，这会让你对按钮、表单和页面交互的理解一下子连起来。

本章定位

本章学习目标

一、为什么 JavaScript 终于能“碰到页面了”

二、什么是 DOM

1. 浏览器看到的，不只是你写的 HTML 文本

2. 为什么 DOM 可以理解成“页面结构树”

3. DOM 和页面是什么关系

三、为什么页面会随着 JavaScript 改变

1. 浏览器先解析 HTML

2. 浏览器根据 DOM 把页面显示出来

3. JavaScript 修改的是 DOM

4. DOM 一变，页面展示就会跟着变

四、DOM 操作的核心流程

1. 第一步：找到页面元素

2. 第二步：对这个元素做操作

3. 有些场景还会多一步

五、如何获取页面元素

六、document是什么

七、getElementById：通过id找元素

1. 基本写法

2. 为什么它适合初学者

3.id的一个基础特点

八、querySelector：按选择器找元素

1. 它和 CSS 选择器很像

2. 当前阶段怎么选

1. 如果已经明确用id找一个元素

2. 如果想用更灵活的选择器方式

九、获取元素后，最常做的第一件事：修改文本

1. 使用textContent

2. 为什么初学阶段优先用textContent

3. 一个完整的小例子

十、获取元素后，第二类常见操作：修改样式

1. 直接使用style

2. 为什么有些样式名和 CSS 里不完全一样

3. 什么时候直接改style比较合适

十一、创建元素并插入页面

1.createElement：创建一个新元素

2. 先给新元素填上内容

3. 再把它放到页面里

4. 一个最小完整例子

十二、一个完整示例：点击按钮后修改标题文本

1. 示例代码

2. 这段代码在做什么

1. 先找到标题元素

2. 再找到按钮元素

3. 当按钮被点击时，修改标题文本

十三、一个完整示例：动态新增一个列表项

1. 示例代码

2. 这个例子串起了哪些知识

3. 为什么这个练习很重要

十四、一个完整示例：点击按钮切换卡片高亮状态

1. 示例代码

2. 为什么这个例子值得现在就看看

3. 当前阶段怎么理解classList.toggle

十五、为什么有时候明明写了代码，页面却没变

1. 元素没有真正找到

2. 脚本执行得太早了

3. 修改的是错误的属性

4. 创建了元素，但没有插入页面

十六、为什么很多示例把<script>放在页面底部

十七、DOM 操作和前面学过的知识是怎么连起来的

1. 函数会继续出现

2. 条件判断会继续出现

3. 数组与对象也会继续出现

十八、初学者最容易踩的坑

1. 还没找到元素，就开始改它

2.id、类名、选择器写错

3. 把脚本放得太早

4. 创建了元素，却忘了插入

5. 样式属性名照着 CSS 原样写

6. 一上来就写很复杂的页面联动

十九、本章实践练习

1. 练习 1：实现点击按钮后修改标题文本

2. 练习 2：动态新增一个列表项

3. 练习 3：点击按钮切换卡片高亮状态

4. 练习 4：把数组数据显示到页面上

二十、学习重点提示

二十一、本章小结

二十二、课后思考题

二十三、下一章预告

六、`document`是什么

七、`getElementById`：通过`id`找元素

3.`id`的一个基础特点

八、`querySelector`：按选择器找元素

1. 如果已经明确用`id`找一个元素

1. 使用`textContent`

2. 为什么初学阶段优先用`textContent`

1. 直接使用`style`

3. 什么时候直接改`style`比较合适

1.`createElement`：创建一个新元素

3. 当前阶段怎么理解`classList.toggle`

十六、为什么很多示例把`<script>`放在页面底部

2.`id`、类名、选择器写错