概述

JavaScript 是网络的编程语言。到目前为止，我们使用 HTML 来构建网页内容结构，使用 CSS 来美化内容。但如果你希望网页能根据用户的输入动态变化呢？JavaScript 让我们能够将静态网页转变为动态的网络应用。

初步入门：理解 DOM

我们使用 JavaScript 实现交互性的主要原因在于它能够操作 文档对象模型（简称 DOM）。

回想第一课中提到的内容：HTML 的结构像一棵 树。同样地，DOM 将 HTML 元素存储为可以被多种方式操作的 对象。

通过 JavaScript，我们可以对 DOM 进行操作，实现以下功能：

• 修改现有的 HTML 元素。
• 修改 HTML 元素的属性。
• 添加或修改与 HTML 元素关联的 CSS 样式。
• 添加或删除 HTML 元素。

让我们开始学习如何使用 JavaScript 为网站添加交互性，方法是获取来自 DOM 的用户输入。现在不必完全理解代码的作用，先感受一下即可。

深入分析代码的第一行：

1var button = document.querySelector('button');

var 关键字用于声明一个变量。变量 用于存储稍后可能用到的数据。等号右边的代码会为变量赋值：它查找文档中第一个匹配引号内选择器的元素，并将其保存在 button 变量中。因此，这行代码创建了一个变量，并将 HTML 中找到的第一个 <button> 元素存储其中。

仅仅保存 <button> 元素还显得有些平淡。接下来我们要学会如何与这个按钮进行 交互。一种主要方式是添加一个 事件监听器，告诉程序当用户在网页上执行某个操作时，就运行一段特定代码。

1button.onclick = function(){
2	alert("Hello, World!");
3}

上述代码表示：当用户点击按钮时，程序将执行存储在函数中的代码。函数用于存放可能需要多次执行的代码块。

在此例中，每当用户点击按钮，就会弹出一个提示框，显示消息 Hello, World!。

练习

为下面 HTML 页面中的 <h1> 元素添加一个事件监听器，使其在点击时显示一条消息。

接下来

在深入探讨 DOM 操作之前，掌握一些编程基础至关重要。这些基础知识将帮助你更深入地理解和使用浏览器提供的各种编程接口，从而更好地与 DOM 进行交互。

让我们一起进入 JavaScript 的世界吧！