19、网页交互与 DOM 操作全解析

algae

于 2025-11-03 13:33:27 发布

阅读量6

点赞数

CC 4.0 BY-SA版权

分类专栏： Head First JavaScript精要文章标签： DOM操作 JavaScript 网页交互

本文链接：https://blog.youkuaiyun.com/algae/article/details/155441544

Head First JavaScript精要专栏收录该内容

47 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

网页交互与 DOM 操作全解析

在网页开发中，实现动态交互是非常重要的一部分。本文将详细介绍如何通过 JavaScript 操作 DOM（文档对象模型）来实现网页内容的动态改变、处理事件以及修改元素样式等功能。

1. DOM 内容的动态改变

1.1 innerHTML 的使用

当使用 innerHTML 改变元素内容时，实际上是在动态改变网页的实际内容。一旦 DOM 中的内容发生改变，网页会立即反映出这些变化。例如：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Planets</title>
  <script>
    var planet = document.getElementById("greenplanet");
    planet.innerHTML = "Red Alert: hit by phaser fire!";
  </script>
</head>
<body>
  <h1>Green Planet</h1>
  <p id="greenplanet">All is well</p>
  <h1>Red Planet</h1>
  <p id="redplanet">Nothing to report</p>
  <h1&