DOM 操作入门 - JavaScript 基础

← 返回课程JavaScript 基础 › 第 9 关

进度 0%

第 9 关：DOM 操作入门

JavaScript入门

📖 本课目标

本关属于《JavaScript 基础》第 9 课。阅读右侧代码模板，理解每一行的作用，然后动手修改并完成练习。

🎯 本课要点

DOM 操作入门
模拟 DOM 操作（在浏览器中可直接运行）
模拟文档结构

🛠 学习方式

阅读右侧代码模板中的注释与实现
修改代码，尝试达成新的效果
点击「运行」查看实际输出
确认理解后点击「提交」标记本关完成

💡 说明

本关为 JavaScript，浏览器可直接运行代码并显示真实输出。

main.pytest.py

// DOM 操作入门
// 模拟 DOM 操作（在浏览器中可直接运行）

// 模拟文档结构
const document_mock = {
    elements: {},
    createElement(tag) {
        const el = { tag, text: "", style: {}, children: [] };
        return el;
    },
    getElementById(id) {
        return this.elements[id] || null;
    }
};

// 创建元素
const heading = document_mock.createElement("h1");
heading.text = "欢迎来到 CodeLearn";
heading.style.color = "#667eea";
heading.style.fontSize = "24px";

const paragraph = document_mock.createElement("p");
paragraph.text = "学习 DOM 操作，让网页动起来！";

const button = document_mock.createElement("button");
button.text = "点击我";
button.style.padding = "10px 20px";
button.style.background = "#667eea";
button.style.color = "white";

// 模拟添加到页面
console.log("创建的元素:");
console.log("  <h1>", heading.text);
console.log("  <p>", paragraph.text);
console.log("  <button>", button.text);

// 实际 DOM API 说明
console.log("\n--- 常用 DOM 方法 ---");
const methods = [
    "document.getElementById('id')     - 按 ID 获取元素",
    "document.querySelector('.class')  - CSS 选择器获取",
    "element.textContent = '文字'       - 修改文本",
    "element.innerHTML = '<b>HTML</b>' - 修改 HTML",
    "element.style.color = 'red'       - 修改样式",
    "element.classList.add('active')   - 添加类名",
    "element.setAttribute('data-x', 1) - 设置属性",
    "parent.appendChild(child)         - 添加子元素"
];
methods.forEach(m => console.log("  " + m));

⚠️ 请勿运行 while(true) 死循环，会卡死本页

点击「运行」或「提交代码」查看结果

📖 查看本课说明

第 9 关：DOM 操作入门

JavaScript · 入门 · 《JavaScript 基础》

DOM 操作入门
模拟 DOM 操作（在浏览器中可直接运行）
模拟文档结构

本关可在浏览器直接运行。