JavaScript DOM 操作：修改内容、样式与属性

示例说明：本示例展示如何通过 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 msg = "";
    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 把判题结果渲染到页面，同时修改样式，实现真正的网页版英语单词检测应用，是前后两课知识的综合融合。

四、掌握技巧与方法

1. 操作 DOM 必须先获取元素，再修改内容/样式/属性。
2. 获取元素优先使用 getElementById，简单稳定。
3. 修改样式使用小驼峰命名法，如 backgroundColor、fontSize。
4. 展示文本用 innerText，展示带标签 HTML 用 innerHTML。
5. 交互功能依靠事件驱动（如 onclick）实现。
6. 可将数组、函数数据通过 DOM 渲染到页面，完成实战项目。

五、课后作业

基础作业

1. 获取页面 id 为 title 的元素，修改文字为'儿童英语学习园地'。
2. 修改元素文字颜色为红色、字号 20px、加粗。

进阶作业

1. 制作一个点击按钮，点击后切换图片显示不同单词图片。
2. 编写函数，修改盒子背景色为黄色，文字居中显示。

实战作业

1. 网页版儿童英语单词判断应用：
   • 使用单词数组与判分函数。
   • 通过 DOM 将结果显示在页面中。
   • 答对显示绿色，答错显示红色。
   • 点击按钮开始判题并展示结果。