JavaScript基础课程九、JavaScript DOM 操作（修改内容/样式/属性）
本课重点学习 JavaScript DOM 核心操作，实现代码对页面的动态控制，是前端开发从逻辑走向视觉的关键课程。学习者需掌握获取元素、修改内容、修改样式、修改属性四大基础技能，并理解事件驱动交互模式。课程完美衔接第8课知识，将函数、数组、循环与 DOM 结合，实现控制台到网页页面的升级，打造可真实运行的英语单词检测交互程序。DOM 是网页交互的基础，所有动态效果、表单验证、页面渲染都依赖 DOM 实现。掌握本课内容，即可独立开发简单交互网页，为后续学习复杂框架、项目实战奠定最重要的基础。
一、课程学习目的
- 理解 DOM 文档对象模型的核心概念，掌握获取页面元素的常用方法。
- 熟练使用 JavaScript 修改页面文本内容、HTML 结构。
- 掌握修改元素样式（行内样式）与元素属性的标准语法。
- 能够结合函数、事件实现页面交互效果，完成儿童英语学习页面的动态交互。
- 建立 JS 操控页面的编程思维，实现数据与视图联动，为网页交互开发打下基础。
二、核心知识点讲解
1. DOM 基础概念
DOM（Document Object Model）即文档对象模型，可将 HTML 页面解析为可被 JS 操作的树状结构。
通过 DOM，JavaScript 可以读取、添加、修改、删除页面上的任意 HTML 元素。
2. 操作前提:获取页面元素
document.getElementById('id名')：通过 id 获取单个元素，最常用、最稳定。
3. 修改元素内容
innerText：修改纯文本内容，不解析标签。innerHTML：修改内容，可解析 HTML 标签。
4. 修改元素样式
语法：元素.style.样式属性 = 值
- 样式属性采用小驼峰命名：
backgroundColor、fontSize、color、display。
5. 修改元素属性
- 标准属性：
src、href、title、disabled。 - 语法：
元素.属性名 = 新值。
6. 事件驱动交互
常用点击事件：onclick，点击元素时执行函数。
三、示例程序
示例1：获取元素并修改文本内容
// 1. 通过 id 获取页面元素 let title = document.getElementById("title"); // 2. 修改元素文本内容 title.innerText = "儿童英语单词学习小程序"; 示例说明：本示例演示 DOM 最基础操作，先获取页面标题元素，再使用 innerText 修改显示文本。这是所有 DOM 操作的基础步骤，清晰展示“获取→修改”的固定流程，适合初学者理解 JS 如何控制页面文字。
示例2：修改元素样式: 颜色、字号、背景
// 获取元素 let wordBox = document.getElementById("wordBox"); // 修改样式（小驼峰写法） wordBox.style.color = "white"; wordBox.style.backgroundColor = "blue"; wordBox.style.fontSize = "24px"; wordBox.style.padding = "10px"; 示例说明：本示例展示如何通过 JS 动态修改元素样式，所有 CSS 带横线属性转为小驼峰形式。通过代码可实时改变页面视觉效果，实现动态主题、提示高亮等功能，是网页交互必备技能。
示例3：修改元素属性: 图片、链接
// 获取图片元素 let wordImg = document.getElementById("wordImg"); // 修改 src 属性（切换图片） wordImg.src = "apple.jpg"; // 修改 alt 属性 wordImg.alt = "苹果单词图片"; 示例说明：本示例用于修改元素自带属性，如图片路径、链接地址。在英语学习场景中可根据单词切换对应图片，让学习更直观，体现 JS 控制页面资源的能力。
示例4：点击事件 + 内容样式综合操作（英语单词交互）
// 获取元素 let showBtn = document.getElementById("showBtn"); let wordResult = document.getElementById("wordResult"); // 绑定点击事件 showBtn.onclick = function () { // 点击后修改内容 wordResult.innerText = "当前学习单词：apple —— 苹果"; // 修改样式 wordResult.style.color = "green"; wordResult.style.fontWeight = "bold"; }; 示例说明：本示例是 DOM 综合实战，结合点击事件实现交互。用户点击按钮后，页面显示单词并修改样式，完全贴合儿童英语学习场景。涵盖获取元素、事件绑定、内容修改、样式修改，是本课最核心的综合案例。
示例5：整合上一课单词判断 + DOM 页面输出
// ========== 第8课 单词数组 ========== let correctWordArray = ["apple", "banana", "dog", "cat", "orange"]; let userAnswerArray = ["apple", "banana", "dog", "cat", "orange"]; // ========== 第9课 DOM 输出结果 ========== let resultBox = document.getElementById("resultBox"); // 判分函数 function checkEnglishWords(words, answers) { let correctCount = 0; let; for (let i = 0; i < words.length; i++) { if (answers[i] === words[i]) { msg += `第 ${i+1} 题：答对 ✅<br>`; correctCount++; } else { msg += `第 ${i+1} 题：答错 ❌<br>`; } } msg += `总题数：${words.length}<br>`; msg += `答对：${correctCount} 题`; // DOM 把结果渲染到页面 resultBox.innerHTML = msg; resultBox.style.color = "#333"; resultBox.style.fontSize = "18px"; } // 执行判断并展示到页面 checkEnglishWords(correctWordArray, userAnswerArray); 示例说明：本示例完美衔接上一课数组与函数知识，将控制台输出升级为页面真实展示。通过 innerHTML 把判题结果渲染到页面，同时修改样式，实现真正的网页版英语单词检测小程序，是前后两课知识的综合融合。
四、掌握技巧与方法
- 操作 DOM 必须先获取元素，再修改内容/样式/属性。
- 获取元素优先使用
getElementById，简单稳定。 - 修改样式使用小驼峰命名法，如
backgroundColor、fontSize。 - 展示文本用
innerText，展示带标签 HTML 用innerHTML。 - 交互功能依靠事件驱动（如
onclick）实现。 - 可将第8课数组、函数数据通过 DOM 渲染到页面，完成实战项目。
五、课后作业
基础作业
- 获取页面 id 为
title的元素，修改文字为“儿童英语学习园地”。 - 修改元素文字颜色为红色、字号 20px、加粗。
进阶作业
- 制作一个点击按钮，点击后切换图片显示不同单词图片。
- 编写函数，修改盒子背景色为黄色，文字居中显示。
实战作业
- 网页版儿童英语单词判断小程序：
- 使用第8课单词数组与判分函数。
- 通过 DOM 将结果显示在页面中。
- 答对显示绿色，答错显示红色。
- 点击按钮开始判题并展示结果。
