第七篇：JavaScript 入门（中）——操作页面元素-殇恋社区

一、回顾与本篇目标

在上一篇中，你学会了用 let 声明变量，认识了字符串、数字、布尔值三种基本数据类型，并用 console.log() 在控制台输出信息。

但那只是 JavaScript 的“自言自语”——它只能在控制台里说话，却碰不到页面上的任何东西。这一篇，我们要让 JS 真正和 HTML 元素互动：获取页面上的元素，修改它的文字，改变它的样式，响应鼠标的点击。

这是前端三基石——HTML、CSS、JS——第一次真正交汇在一起的时刻。

本篇的目标：

学会用 document.getElementById() 获取页面元素
学会用 .textContent 修改元素的文字内容
学会用 .style 动态修改元素的 CSS 样式
学会用 onclick 响应点击事件
写出一个完整的“点击按钮改变页面”的交互流程

二、获取页面元素：`document.getElementById()`

要操控页面上的某个元素，第一步是找到它。JavaScript 通过 DOM（文档对象模型）来访问页面上的所有元素。入门阶段，我们掌握最常用、最直接的方法：document.getElementById()。

语法

document.getElementById('元素的 id 值');

document：代表整个网页文档。它是 JS 访问页面的入口。
.：可以理解为“的”。
getElementById：英文直译“通过 ID 获取元素”。它是一个方法（函数），用来在页面中查找具有指定 id 的元素。
() 里面放的是要查找的 id 值，必须用引号包裹。

完整理解：document.getElementById('message') 翻译过来就是——在整个文档中，找到 ID 为 'message' 的那个元素，并把它交给我。

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>获取元素演示</title>
</head>
<body>

  <h1 id="main-title">原始标题</h1>
  <p id="message">这是一段原始文字。</p>

  <script>
    // 通过 id 获取 h1 元素，存进变量
    let titleElement = document.getElementById('main-title');
    let messageElement = document.getElementById('message');

    // 输出看看拿到了什么
    console.log(titleElement);      // 控制台会显示整个 h1 元素
    console.log(messageElement);    // 控制台会显示整个 p 元素
  </script>

</body>
</html>

打开控制台，你会看到两个 HTML 元素被打印出来。这说明 JS 成功“抓住”了它们。

术语解释——DOM：当浏览器加载一个 HTML 页面时，它会在内存中构建一棵“树”，每个 HTML 标签都是树上的一个节点。这棵树就是 DOM。JavaScript 通过 DOM 来访问和修改页面上的任何内容。document.getElementById() 就是访问这棵树的一种方法。

三、修改文字内容：`.textContent`

拿到元素之后，可以用 .textContent 属性读取或修改它内部的纯文字。

读取文字

let msgElement = document.getElementById('message');
console.log(msgElement.textContent);  // 输出该元素当前显示的文字

修改文字

msgElement.textContent = '这是修改后的新文字。';

一行代码，页面上的文字立刻改变。不需要刷新页面，不需要重新渲染整个 HTML，这就是动态交互的基础。

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>修改文字演示</title>
</head>
<body>

  <h1 id="title">你好</h1>
  <p id="info">点击按钮前，这里是原始文字。</p>

  <button onclick="changeText()">点击修改文字</button>

  <script>
    function changeText() {
      document.getElementById('title').textContent = '标题已改变！';
      document.getElementById('info').textContent = '看，段落文字也被 JavaScript 修改了。';
    }
  </script>

</body>
</html>

在浏览器中打开这个页面，点击按钮，标题和段落会立刻变成新的文字。

代码解析：

HTML 里的按钮有 onclick="changeText()"，意思是“点击时执行 changeText 函数”。
JS 里定义了 function changeText() { ... }，这个函数里封装了两行修改文字的指令。
函数定义时不会立刻执行。只有当用户点击按钮时，浏览器才会调用它，执行里面的代码。
这就是“事件驱动编程”的最基本形式：你定义好行为，用户触发事件，浏览器执行对应的代码。

四、修改元素样式：`.style`

JS 不仅改文字，还能改 CSS 样式。通过 .style 属性，可以动态修改元素的行内样式。

语法

元素.style.CSS属性名 = '新的值';

重要：CSS 属性名在 JS 中的写法不同。

CSS 中用连字符连接的属性名（如 background-color、font-size），在 JS 中要改成驼峰命名：去掉连字符，把连字符后面的字母大写。

CSS 属性名	JS 中的写法
`color`	`element.style.color`
`background-color`	`element.style.backgroundColor`
`font-size`	`element.style.fontSize`
`text-align`	`element.style.textAlign`
`border-radius`	`element.style.borderRadius`
`display`	`element.style.display`

完整示例：点按钮改变颜色和大小

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>修改样式演示</title>
</head>
<body>

  <p id="text">我会变色和变大！</p>

  <button onclick="changeColor()">变成红色</button>
  <button onclick="changeSize()">字体变大</button>
  <button onclick="resetStyle()">恢复默认</button>

  <script>
    let textEl = document.getElementById('text');

    function changeColor() {
      textEl.style.color = 'red';
      textEl.style.backgroundColor = '#ffeeee';
      textEl.style.padding = '10px';
    }

    function changeSize() {
      textEl.style.fontSize = '32px';
    }

    function resetStyle() {
      textEl.style.color = '';
      textEl.style.backgroundColor = '';
      textEl.style.padding = '';
      textEl.style.fontSize = '';
    }
  </script>

</body>
</html>

代码解析：

三个按钮分别绑定了三个不同的函数。
changeColor() 修改文字颜色、背景色和内边距。
changeSize() 修改字号。
resetStyle() 把所有改过的样式设为空字符串 ''。这表示“恢复默认”，浏览器会回到 CSS 定义的样式或初始值。
注意 let textEl = document.getElementById('text'); 写在三个函数外面，这样获取元素的操作只执行一次，三个函数共用同一个变量。这比在每个函数里都写一遍 document.getElementById 更高效。

五、响应点击事件：`onclick`

前面我们已经悄悄用了 onclick，现在正式解释它。

onclick 是一个 HTML 属性，也是一个 JS 事件处理器。它的值是一段 JS 代码，当用户点击这个元素时执行。

两种写法：

方式一：写在 HTML 标签里（我们一直在用）

<button onclick="doSomething()">点击</button>

方式二：纯 JS 绑定（更专业）

<button id="myBtn">点击</button>

<script>
  let btn = document.getElementById('myBtn');
  btn.onclick = function() {
    alert('按钮被点击了！');
  };
</script>

入门阶段，两种方式都可以用。方式一更直观，方式二更利于代码的组织（HTML 只管结构，JS 只管行为，二者分离）。后面的文章会逐步偏向方式二。

六、显示与隐藏元素

一个非常常见的交互效果：点击按钮，某个元素出现或消失。这通过修改 display 样式来实现。

完整示例：展开/收起详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>显示隐藏演示</title>
  <style>
    #detail {
      background: #f9f9f9;
      padding: 20px;
      border: 1px solid #ddd;
      margin-top: 10px;
      display: none;  /* 初始隐藏 */
    }
  </style>
</head>
<body>

  <h2>产品介绍</h2>
  <button id="toggleBtn">显示详情</button>

  <div id="detail">
    <p>这是产品的详细介绍内容。点击按钮可以展开或收起这段文字。</p>
    <p>用 JS 控制显示和隐藏是网页中最常见的交互模式之一。</p>
  </div>

  <script>
    let detailEl = document.getElementById('detail');
    let btn = document.getElementById('toggleBtn');

    btn.onclick = function() {
      if (detailEl.style.display === 'none') {
        // 当前是隐藏状态 → 显示它，并修改按钮文字
        detailEl.style.display = 'block';
        btn.textContent = '隐藏详情';
      } else {
        // 当前是显示状态 → 隐藏它，并恢复按钮文字
        detailEl.style.display = 'none';
        btn.textContent = '显示详情';
      }
    };
  </script>

</body>
</html>

代码解析——这个例子非常重要，请仔细理解：

CSS 中设置了 #detail { display: none; }，页面加载时详情区域默认隐藏。
点击按钮时，JS 检查当前 display 的值：
- 如果是 'none'（隐藏），就改成 'block'（显示为块级元素），同时把按钮文字改成“隐藏详情”。
- 如果不是 'none'（即已经显示），就改成 'none'（隐藏），同时把按钮文字改回“显示详情”。
这就是一个切换（toggle）效果——同一个按钮，根据当前状态执行相反的操作。
if...else 是条件判断语句，下一篇会详细讲。现在你只需要理解它的字面意思：如果条件成立就执行花括号里的代码，否则执行 else 花括号里的代码。

七、本篇综合实战：一个交互式信息卡片

下面这段代码综合运用了本篇所学的所有知识：获取元素、修改文字、修改样式、点击事件、显示隐藏。请手敲并在浏览器中体验：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>交互式信息卡片</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: #f0f4f8;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .card {
      background: white;
      width: 360px;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      text-align: center;
    }

    .card img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-bottom: 12px;
      transition: transform 0.3s;
    }

    .card h2 {
      margin: 0 0 4px 0;
      color: #333;
    }

    .card .status {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 12px;
      background: #e8f5e9;
      color: #2e7d32;
      margin-bottom: 16px;
    }

    .card .info {
      color: #666;
      font-size: 14px;
      line-height: 1.6;
    }

    .card .detail {
      display: none;              /* 初始隐藏 */
      background: #f8f9fa;
      padding: 16px;
      border-radius: 8px;
      margin-top: 16px;
      font-size: 13px;
      color: #555;
      text-align: left;
      line-height: 1.6;
    }

    .card button {
      margin-top: 16px;
      padding: 10px 24px;
      background: #4a90d9;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .card button:hover {
      background: #357abd;
    }

    /* 夜间模式样式 */
    body.night-mode {
      background: #1a1a2e;
    }

    body.night-mode .card {
      background: #16213e;
    }

    body.night-mode .card h2 {
      color: #eee;
    }

    body.night-mode .card .info {
      color: #aaa;
    }

    body.night-mode .card .detail {
      background: #0f3460;
      color: #ccc;
    }
  </style>
</head>
<body>

  <div class="card">
    <!-- 头像 -->
    <img id="avatar" src="https://via.placeholder.com/80" alt="头像">

    <!-- 姓名 -->
    <h2 id="userName">张三</h2>

    <!-- 在线状态 -->
    <span id="statusBadge" class="status">在线</span>

    <!-- 简介 -->
    <p class="info" id="shortInfo">前端开发学习者 | 热爱编程</p>

    <!-- 按钮区域 -->
    <div>
      <button id="toggleDetailBtn">展开详情</button>
      <button id="changeStatusBtn">切换状态</button>
      <button id="nightModeBtn">夜间模式</button>
    </div>

    <!-- 详情区域（初始隐藏） -->
    <div class="detail" id="detail">
      <p><strong>所在地：</strong>上海</p>
      <p><strong>技能：</strong>HTML、CSS、JavaScript</p>
      <p><strong>学习目标：</strong>成为一名全栈前端工程师</p>
      <p><strong>座右铭：</strong>每天进步一点点。</p>
    </div>
  </div>

  <script>
    // === 获取所有需要操作的元素 ===
    let userNameEl = document.getElementById('userName');
    let statusBadge = document.getElementById('statusBadge');
    let shortInfoEl = document.getElementById('shortInfo');
    let detailEl = document.getElementById('detail');
    let avatarEl = document.getElementById('avatar');

    let toggleDetailBtn = document.getElementById('toggleDetailBtn');
    let changeStatusBtn = document.getElementById('changeStatusBtn');
    let nightModeBtn = document.getElementById('nightModeBtn');

    // === 功能一：展开 / 收起详情 ===
    toggleDetailBtn.onclick = function() {
      if (detailEl.style.display === 'block') {
        // 当前显示 → 隐藏
        detailEl.style.display = 'none';
        toggleDetailBtn.textContent = '展开详情';
      } else {
        // 当前隐藏 → 显示
        detailEl.style.display = 'block';
        toggleDetailBtn.textContent = '收起详情';
      }
    };

    // === 功能二：切换在线状态 ===
    changeStatusBtn.onclick = function() {
      if (statusBadge.textContent === '在线') {
        statusBadge.textContent = '忙碌';
        statusBadge.style.background = '#fff3e0';
        statusBadge.style.color = '#e65100';
        shortInfoEl.textContent = '正在学习中... | 暂时无法回复';
      } else {
        statusBadge.textContent = '在线';
        statusBadge.style.background = '#e8f5e9';
        statusBadge.style.color = '#2e7d32';
        shortInfoEl.textContent = '前端开发学习者 | 热爱编程';
      }
    };

    // === 功能三：夜间模式切换 ===
    let isNightMode = false;

    nightModeBtn.onclick = function() {
      if (isNightMode) {
        // 当前是夜间模式 → 切换回白天
        document.body.classList.remove('night-mode');
        nightModeBtn.textContent = '夜间模式';
        isNightMode = false;
      } else {
        // 当前是白天 → 切换到夜间
        document.body.classList.add('night-mode');
        nightModeBtn.textContent = '白天模式';
        isNightMode = true;
      }
    };

    // === 功能四：点击头像变大（演示 .style 的另一种用法） ===
    avatarEl.onclick = function() {
      if (avatarEl.style.width === '120px') {
        avatarEl.style.width = '80px';
        avatarEl.style.height = '80px';
      } else {
        avatarEl.style.width = '120px';
        avatarEl.style.height = '120px';
      }
    };
  </script>

</body>
</html>

逐块解析：

元素获取：在 JS 开头一次性获取所有需要用到的元素，存进变量。后续所有操作都使用这些变量，高效且清晰。
功能一：展开/收起详情：和前面第六节的逻辑一样，通过判断 display 的当前值来决定是显示还是隐藏，同时修改按钮文字。
功能二：切换在线状态：修改了状态标签的 textContent 和 style（背景色和文字颜色），同时修改简介文字。注意颜色的切换完全通过 JS 动态控制。
功能三：夜间模式：这里没有直接用 .style，而是用了 classList.add() 和 classList.remove() 来给 <body> 添加或移除一个 CSS 类名 night-mode。CSS 中已经写好了 body.night-mode 的各种样式规则。这种方式更优雅——样式由 CSS 管理，JS 只负责切换类名。
功能四：点击头像变大：直接修改头像的 width 和 height 样式，实现点击放大、再点击缩小的效果。

这个示例虽然代码稍长，但每个功能模块都清晰独立。你可以逐个功能去阅读和理解，然后尝试修改数值和样式来观察变化。

八、本篇动手练习

练习 1：修改文字练习

新建 practice7-1.html，放一个 <h1> 和一个 <button>。点击按钮，用 document.getElementById() 获取标题并用 .textContent 把它改成“你点击了按钮！”。

练习 2：修改样式练习

新建 practice7-2.html，放一个 <p> 和三个按钮：“变红”、“变大”、“加边框”。分别实现对应的样式修改。再加一个“重置”按钮，清空所有修改。

练习 3：显示/隐藏练习

新建 practice7-3.html，做一个“阅读更多”功能。页面上有一段简短文字，下面有一个隐藏的详细段落。点击“阅读更多”按钮，显示详细内容，按钮文字变成“收起”。再点击，隐藏详细内容，按钮文字恢复。

练习 4：改造综合示例

打开第七节的综合代码，做以下改造：

把卡片中的姓名改成你自己的。
把详情中的所在地和技能改成你的真实信息。
给“切换状态”增加第三个状态：“离线”（灰色背景 + 灰色文字）。这意味着你需要用一个数字变量来记录当前是第几个状态，而不仅仅是判断 === '在线'。
尝试在夜间模式下也改变按钮的颜色（在 CSS 的 body.night-mode 规则里添加对 .card button 的样式覆盖）。

九、本篇小结

这一篇你学会了 JavaScript 与 HTML/CSS 交互的核心方法：

document.getElementById('id')：通过 ID 获取页面上的元素。这是 JS 操控页面的入口。
.textContent：读取或修改元素的纯文字内容。
.style：动态修改元素的行内 CSS 样式。注意 CSS 属性名要改成驼峰写法（background-color → backgroundColor）。
.classList.add() / .classList.remove()：给元素添加或移除 CSS 类名，适合批量样式切换（如夜间模式）。
onclick：响应点击事件，驱动用户交互。可以写在 HTML 属性里，也可以用 JS 绑定。
if...else：根据条件执行不同的代码，是实现“切换”效果的基础。

至此，HTML（结构）、CSS（样式）、JavaScript（行为）三条线正式交汇。你已经能写出一个完整的交互页面——用户点击按钮，页面上的文字、样式、可见性都会动态变化。这正是前端开发的本质工作。

下一篇预告

下一篇，我们将深入学习 JavaScript 的函数与控制流。你会学到：如何用 function 定义带参数的函数、if...else if...else 多分支条件判断、以及 alert() 和 prompt() 与用户互动。我们还会做一个“猜数字”小游戏，把你学到的知识串联起来。

前端·零基础入门专题，每周更新。

分享是一种美德！

THE END

前端零基础入门技术笔记
# 交互设计 # 页面元素 # 操作DOM # 点击事件

第七篇：JavaScript 入门（中）——操作页面元素

一、回顾与本篇目标

二、获取页面元素：`document.getElementById()`

语法

完整示例

三、修改文字内容：`.textContent`

读取文字

修改文字

完整示例

四、修改元素样式：`.style`

语法

完整示例：点按钮改变颜色和大小

五、响应点击事件：`onclick`

六、显示与隐藏元素

完整示例：展开/收起详情

七、本篇综合实战：一个交互式信息卡片

八、本篇动手练习

练习 1：修改文字练习

练习 2：修改样式练习

练习 3：显示/隐藏练习

练习 4：改造综合示例

九、本篇小结

下一篇预告

无法安装 – 解决方案

最全网站搭建保姆级教程，附源码！值得收藏！

十二：从入门到进阶——后端工程师的成长手册

Meting API 使用指南

请登录后发表评论

第七篇：JavaScript 入门（中）——操作页面元素

一、回顾与本篇目标

二、获取页面元素：document.getElementById()

语法

完整示例

三、修改文字内容：.textContent

读取文字

修改文字

完整示例

四、修改元素样式：.style

语法

完整示例：点按钮改变颜色和大小

五、响应点击事件：onclick

六、显示与隐藏元素

完整示例：展开/收起详情

七、本篇综合实战：一个交互式信息卡片

八、本篇动手练习

练习 1：修改文字练习

练习 2：修改样式练习

练习 3：显示/隐藏练习

练习 4：改造综合示例

九、本篇小结

下一篇预告

无法安装 – 解决方案

最全网站搭建保姆级教程，附源码！值得收藏！

十二：从入门到进阶——后端工程师的成长手册

Meting API 使用指南

请登录后发表评论

二、获取页面元素：`document.getElementById()`

三、修改文字内容：`.textContent`

四、修改元素样式：`.style`

五、响应点击事件：`onclick`