本章定位前面几章里你已经逐步掌握了 JavaScript 的基础逻辑能力。你已经学习了JavaScript 是什么代码如何运行。变量、数据类型与运算。条件判断与循环。函数与代码复用。数组与对象。到这里你已经能写出不少“会处理数据”的代码了。例如计算总价判断成绩等级处理一组课程数据组织一个用户对象但如果这些逻辑始终只停留在控制台里你会很快发现一个问题页面上的内容到底什么时候才能真正被 JavaScript 改掉比如点击按钮后修改标题文字给某个卡片加上高亮状态动态新增一个列表项根据数据把内容显示到页面上这些事情已经不只是“处理值”了而是开始真正碰到网页本身。这时候我们就要进入一个前端非常关键的主题DOM 操作这一章要解决的核心问题是JavaScript 到底是怎样找到页面元素、修改页面内容并让浏览器把变化展示出来的。本章学习目标学完这一章后你应该能做到理解什么是 DOM以及 DOM 和网页页面之间的关系。理解为什么页面会随着 JavaScript 改变。掌握 DOM 操作最基础的流程先找到元素再修改它。学会使用document.getElementById和document.querySelector获取元素。学会修改元素文本内容和基础样式。学会创建元素并插入页面。能完成“点击按钮修改标题”“动态新增列表项”“切换卡片高亮状态”这类基础练习。一、为什么 JavaScript 终于能“碰到页面了”在前面的学习中你写过不少 JavaScript 代码。但大多数结果可能都是通过console.log(...)打印到控制台里。这一步当然很重要因为它帮你先把逻辑学明白了。但真实的前端开发并不只是让代码在控制台输出结果而是要让这些结果出现在页面上改变页面内容改变页面样式和用户操作产生互动也就是说从这一章开始JavaScript 不再只是“处理数据”而是开始真正参与页面结构和页面展示的变化。这就是 DOM 操作的重要意义。二、什么是 DOMDOM 是Document Object Model的缩写中文通常叫文档对象模型第一次看到这个名字时很多初学者会觉得有点抽象。其实你现在可以先这样理解DOM 是浏览器把网页内容整理成的一棵“可操作的页面结构树”。1. 浏览器看到的不只是你写的 HTML 文本比如你写了一段 HTMLbodyh1欢迎来到前端世界/h1p这是第一段介绍文字。/pbutton点我一下/button/body你在编辑器里看到的是一段 HTML 代码。但浏览器为了把它显示出来并让 JavaScript 能操作它通常会把它理解成更像下面这样的结构bodyh1pbutton这就是一种非常简化的 DOM 理解方式。2. 为什么 DOM 可以理解成“页面结构树”因为页面里的元素往往存在层级关系。例如body下面有标题、段落、按钮ul下面有多个lidiv里面可能还有别的子元素这种“父元素 - 子元素”的关系很适合被理解成一棵树。3. DOM 和页面是什么关系你可以先记住一句很重要的话DOM 不是另一套和页面无关的东西DOM 就是浏览器用来表示当前页面结构的一种方式。正因为浏览器把页面整理成了 DOMJavaScript 才能找到某个元素修改它的文本修改它的样式新增或删除元素三、为什么页面会随着 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.getElementByIddocument.querySelector六、document是什么在浏览器环境里document可以先理解成当前网页文档本身。也就是说你后面写的很多 DOM 代码都会从document开始。例如document.getElementById(page-title);document.querySelector(.card);你可以把它们理解成让浏览器在当前页面里帮你找某个元素。七、getElementById通过id找元素这是非常适合新手入门的获取方式。1. 基本写法document.getElementById(元素的 id);例如 HTML 里有h1idpage-title欢迎来到前端世界/h1那你就可以在 JavaScript 里写constpageTitledocument.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找一个元素优先可以先用getElementById2. 如果想用更灵活的选择器方式可以用querySelector这两种方式当前阶段先掌握到能熟练用起来就很好。九、获取元素后最常做的第一件事修改文本纯小白第一次做 DOM最适合先从“改文字”开始。因为这个效果最直观也最容易看出页面变化。1. 使用textContenttextContent可以先理解成元素里的文本内容。例如h1idpage-title欢迎来到前端世界/h1constpageTitledocument.getElementById(page-title);pageTitle.textContent标题已经被 JavaScript 修改了;页面上的标题文字就会发生变化。2. 为什么初学阶段优先用textContent因为它很直接也更适合入门读取文本方便修改文本方便不容易一下子把内容结构搞复杂当前阶段先把找到元素然后改textContent这件事练熟已经非常有价值。3. 一个完整的小例子h1idpage-title欢迎来到前端世界/h1scriptconstpageTitledocument.getElementById(page-title);// 找到标题元素后直接修改它的文本内容pageTitle.textContent这是 JavaScript 修改后的标题;/script只要页面加载时这段代码执行标题就会立刻改变。十、获取元素后第二类常见操作修改样式除了改文字另一个非常常见的 DOM 操作就是改样式。1. 直接使用style例如pidintro-text欢迎来到 DOM 学习阶段。/pscriptconstintroTextdocument.getElementById(intro-text);// 直接修改元素的内联样式让变化更容易观察introText.style.color#409eff;introText.style.fontSize24px;/script这段代码会直接改变这段文字的颜色和字体大小。2. 为什么有些样式名和 CSS 里不完全一样例如在 CSS 里你写的是font-size background-color但在 JavaScript 的style里通常会写成fontSize backgroundColor也就是说很多样式名会改成小驼峰写法这点是初学者很容易踩的坑后面要慢慢习惯。3. 什么时候直接改style比较合适初学阶段为了快速看到变化直接改style很适合练手。因为它最直观。但以后页面复杂起来时你会越来越常用“切换类名”的方式来统一控制样式。当前阶段先不要有负担先把“找到元素后能改样式”这件事练熟就很好。十一、创建元素并插入页面DOM 操作不只是“改已有内容”还可以动态创建新元素再把它放进页面里。这一步特别重要因为以后很多列表、评论区、消息区本质上都在做类似事情。1.createElement创建一个新元素例如constnewItemdocument.createElement(li);这表示创建了一个新的li元素。2. 先给新元素填上内容例如newItem.textContent这是一个新列表项;3. 再把它放到页面里例如页面中原本有ulidtodo-list/ul那你就可以这样插入consttodoListdocument.getElementById(todo-list);todoList.appendChild(newItem);你可以先把appendChild理解成把这个新元素追加到目标元素的最后面。4. 一个最小完整例子ulidtodo-list/ulscriptconsttodoListdocument.getElementById(todo-list);constnewItemdocument.createElement(li);// 先创建元素再补内容最后插入到页面里newItem.textContent学习 DOM 基础;todoList.appendChild(newItem);/script页面中就会出现一个新的列表项。十二、一个完整示例点击按钮后修改标题文本下面我们来做一个非常适合纯小白入门的完整示例。目标是点击按钮后让标题文字发生变化。注意这里我们会先用最容易理解的写法让你先体验 DOM 变化本身。下一章会系统学习事件机制。1. 示例代码h1idpage-title欢迎来到前端世界/h1buttonidchange-title-button修改标题/buttonscriptconstpageTitledocument.getElementById(page-title);constchangeTitleButtondocument.getElementById(change-title-button);// 先体验“点击后执行一段 DOM 修改代码”changeTitleButton.onclickfunction(){pageTitle.textContent标题已经被 JavaScript 修改了;};/script2. 这段代码在做什么你可以按下面顺序理解1. 先找到标题元素constpageTitledocument.getElementById(page-title);2. 再找到按钮元素constchangeTitleButtondocument.getElementById(change-title-button);3. 当按钮被点击时修改标题文本pageTitle.textContent标题已经被 JavaScript 修改了;这就是一个非常标准的 DOM 入门流程找元素 - 在合适时机修改它十三、一个完整示例动态新增一个列表项这一次我们练的是“创建元素并插入页面”。目标是点击按钮后往列表里新增一项。1. 示例代码ulidtodo-listli学习 HTML/lili学习 CSS/li/ulbuttonidadd-item-button新增列表项/buttonscriptconsttodoListdocument.getElementById(todo-list);constaddItemButtondocument.getElementById(add-item-button);letnextItemNumber3;addItemButton.onclickfunction(){constnewItemdocument.createElement(li);// 每点击一次就创建一个新的列表项并追加到列表末尾newItem.textContent学习任务${nextItemNumber};todoList.appendChild(newItem);nextItemNumber1;};/script2. 这个例子串起了哪些知识它已经同时用到了获取元素创建元素修改文本把元素插入页面变量和数字递增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;}/styledividuser-cardclasscard这是一个前端学习卡片/divbuttonidtoggle-highlight-button切换高亮状态/buttonscriptconstuserCarddocument.getElementById(user-card);consttoggleHighlightButtondocument.getElementById(toggle-highlight-button);toggleHighlightButton.onclickfunction(){// 通过切换类名让元素在普通样式和高亮样式之间切换userCard.classList.toggle(highlight);};/script2. 为什么这个例子值得现在就看看虽然你这一章的重点还是 DOM 基础但这个例子会帮你建立一个很实用的认识改样式不一定非要一条一条改style也可以通过切换类名来整体切换视觉状态。这在真实开发里很常见。3. 当前阶段怎么理解classList.toggle你现在可以先把它理解成如果元素身上没有这个类名就加上如果已经有了就去掉。所以按钮每点一次卡片样式就会来回切换。十五、为什么有时候明明写了代码页面却没变这是纯小白在 DOM 学习阶段最常见的困惑之一。你明明写了获取元素、修改文本的代码但页面就是没反应。很多时候问题都出在下面这些基础点上。1. 元素没有真正找到例如HTML 里的id写错了JavaScript 里的选择器写错了想找的元素根本不存在这时拿到的结果可能是null后面再去改它就会报错。2. 脚本执行得太早了例如你在元素还没出现在页面结构前就先执行了document.getElementById(page-title);这时候浏览器还没读到那个元素自然就找不到。3. 修改的是错误的属性例如想改文本却没有改textContent或者想改样式却把fontSize写成了font-size。4. 创建了元素但没有插入页面比如你只写了constnewItemdocument.createElement(li);newItem.textContent新的列表项;但没有写todoList.appendChild(newItem);那这个新元素虽然创建出来了但并没有真正放到页面里。十六、为什么很多示例把script放在页面底部这点非常实用也特别值得现在就记住。例如很多入门示例会写成bodyh1idpage-title欢迎来到前端世界/h1scriptconstpageTitledocument.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-size24px;这就是不对的。在 JavaScript 里应该写element.style.fontSize24px;6. 一上来就写很复杂的页面联动DOM 初学阶段最怕的不是知识少而是一开始就把练习做得太大。更稳妥的节奏是先改一个文本再改一个样式再新增一个元素再做一个简单点击交互这样会稳很多。十九、本章实践练习这一章最适合做“能立刻看到页面变化”的小练习。重点不是做得复杂而是让你真正建立JavaScript 可以找到页面元素并改变页面。1. 练习 1实现点击按钮后修改标题文本请你自己写一个页面至少包含一个标题一个按钮点击按钮后把标题从欢迎来到前端世界改成标题已经更新这个练习重点是获取元素修改textContent观察页面变化2. 练习 2动态新增一个列表项请创建一个列表和一个按钮。每点击一次按钮就往列表末尾新增一个新的li元素。这个练习重点是createElementtextContentappendChild3. 练习 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 执行的”这会让你对按钮、表单和页面交互的理解一下子连起来。