给网页装上大脑 ｜ 课型：理实一体课 ｜ 建议课时：3节
点击按钮展开收起长文，按钮文字同步切换——DOM与事件的入门实战。
新窗口运行 下载源码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>阅读更多</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; max-width: 640px; margin: 40px auto; padding: 0 16px; color: #1f2a33; }
#more { display: none; }
#more.show { display: block; }
button { background: #0f8c7f; color: #fff; border: none; padding: 10px 24px;
border-radius: 8px; cursor: pointer; font-size: 15px; }
button:hover { background: #123a52; }
#log { background: #f2f6f8; padding: 10px; border-radius: 6px; font-size: 13px; color: #6b8a99; margin-top: 16px; }
</style>
</head>
<body>
<h1>三亚的夏天</h1>
<p>三亚位于海南岛最南端，是中国著名的热带滨海旅游城市……</p>
<div id="more">
<p>这里常年温暖，椰风海韵。亚龙湾、天涯海角、南山文化旅游区都是著名景点。</p>
<p>对于学习前端的同学来说，在美景中写代码也是一种幸福。</p>
</div>
<p><button id="btn">阅读更多</button></p>
<div id="log">控制台：等待操作……</div>
<script>
const btn = document.getElementById('btn');
const more = document.getElementById('more');
const log = document.getElementById('log');
btn.addEventListener('click', function () {
more.classList.toggle('show');
const opened = more.classList.contains('show');
btn.textContent = opened ? '收起' : '阅读更多';
log.textContent = '控制台：点击了按钮，当前状态 = ' + (opened ? '展开' : '收起');
console.log('toggle执行，show类存在？', opened);
});
</script>
</body>
</html>任务目标：独立完成"阅读更多"交互并理解DOM操作三板斧
| 任务内容与评分 |
|---|
| 任务1：正确引入JS并输出第一条console.log（10分） |
| 任务2：用getElementById获取元素并修改文字（20分） |
| 任务3：实现点击切换显示/隐藏（30分） |
| 任务4：按钮文字随状态切换（20分） |
| 任务5：写出script放head中失效的原因及两种解决方案（20分） |