3.14 操作网页：DOM 与事件

前面学的 JS 语法（变量、循环、函数……）和网页还没真正“连上”。这一节是整个课程的高潮：让 JavaScript 抓取页面元素、改变它们、响应用户操作。学完这一节，你就能做出真正“活”的网页了。

下面的实验就是一个可交互的迷你页面：点按钮数字会变，换颜色，输入名字实时问候。

DOM：网页的“可编程版本”

当浏览器加载 HTML 后，会把页面变成一棵由元素组成的树，叫 DOM（Document Object Model，文档对象模型）。JavaScript 可以通过 DOM 访问和修改页面上的任何东西。

入口是全局对象 document。

第一步：找到元素

用 document.querySelector(选择器) 抓取元素——括号里用的就是你在 CSS 学过的选择器语法：

const title = document.querySelector("h1");       // 第一个 h1
const btn   = document.querySelector("#myBtn");    // id 为 myBtn 的元素
const items = document.querySelectorAll(".item");  // 所有 .item（多个）

第二步：改变元素

抓到元素后，就能改它的内容和样式：

title.textContent = "新标题";        // 改文字
title.style.color = "red";          // 改样式
btn.classList.add("active");        // 加一个 class

• textContent：元素里的文字。

• style.xxx：行内样式（注意 CSS 的 font-size 在 JS 里写成 fontSize）。

• classList.add / remove：增删 class，配合 CSS 用最方便。

第三步：监听事件

事件（event） 是“用户做了某个动作”，比如点击、输入、移动鼠标。用 addEventListener 来“监听”事件：当它发生时，运行你给的函数。

const btn = document.querySelector("#myBtn");

btn.addEventListener("click", () => {
  console.log("按钮被点击了！");
});

addEventListener 接两个参数：事件名（"click"）和一个回调函数（事件发生时要运行的代码）。

把三步连起来：一个计数器

const display = document.querySelector("#count");
const btn = document.querySelector("#plus");
let count = 0;

btn.addEventListener("click", () => {
  count = count + 1;             // 改数据
  display.textContent = count;   // 更新页面
});

读一遍这段代码，你会发现它把这门课的一切都用上了：变量、函数、事件、DOM。点一下按钮 → 运行回调 → 改变量 → 更新页面。 这就是几乎所有网页交互的基本套路。

恭喜你，完成了！

回头看看你这门课走过的路：

• HTML 搭出页面的结构（标题、段落、按钮、表单）。

• CSS 给页面穿上外观（颜色、盒模型、Flexbox 布局）。

• JavaScript 让页面动起来（变量、分支、循环、函数、数组、对象，以及 DOM 与事件）。

这三层加在一起，就是每一个网页背后的全部基础。从这里出发，你已经具备了继续深入任何前端方向（React、Vue、动画、可视化……）的根基。继续动手做点小东西吧——做中学，永远是最快的路。