推荐阅读：JavaScript书中的第14章和第15章
JavaScript代码的主要目的是与HTML页面的元素进行交互。在一段典型的JavaScript代码中，我们将读取一个或多个页面元素的内容，对这些输入进行计算，然后将结果放回其他页面元素中进行显示。
为了使这些交互成为可能，JavaScript设置了一个文档对象模型，简称DOM。在JavaScript DOM中，页面中的每个元素都由一个称为对象的JavaScript软件实体表示。JavaScript对象将数据存储在属性中，并且可以通过执行方法响应命令。我们到DOM的入口点是一对预定义的DOM变量：window和document，它们使我们能够访问表示窗口及其内容的对象。
预定义的文档变量提供了一个查找方法getElementById，我们可以使用它来定位表示我们感兴趣的交互元素的对象。这里有一个典型的例子。在我上面链接到的示例页面中，有一个文本输入字段，用户可以在其中输入自己的姓名。设置该元素的HTML代码如下所示
<input type="text" class="form-control" id="name" />
这里需要注意的最重要的事情是文本输入name的id属性。我们将使用这个id来定位表示这个元素的DOM对象。为了定位和使用该对象，我们首先声明一个存储该对象的变量。然后，我们要求文档对象通过查找方法来定位元素：
let nameField = document.getElementById('name')；
一旦我们访问了代表文本字段的对象，我们就可以使用它的value属性来查找用户在文本字段中输入的内容：
让name = nameField.value；
除了读取对象属性，我们还可以使用JavaScript代码来设置对象属性的值。最常见的例子是设置段落或跨度的文本内容。在本课的示例程序中，我在HTML页面底部附近设置了一个段落，用于显示计算结果。最初，该元素看起来像这样：
< p id = "结果" > < / p >
最初这一段是空的。在运行构建消息的JavaScript计算之后，我们将在这个段落元素中插入一些文本内容。如果我们将问候语信息存储在一个变量greeting中，我们可以使用以下序列使该总数出现在该段落中：
let resultPar = document.getElementById('result')；resultPar。textContent =问候；
上面的第二个语句设置段落的文本内容属性。一旦我们这样做，该文本将出现在浏览器中的段落中。
在今天的示例中，我们将使用DOM的最后一个重要方面是设置一对事件处理程序。当用户通过点击按钮与页面中的某些元素交互时，浏览器将生成一个事件。在JavaScript中，我们可以通过设置事件处理程序来表达对该事件的兴趣。事件处理程序只是我们附加到某个元素上的函数。当元素生成该事件时，事件处理程序函数中的代码将运行，从而为我们提供响应该事件的机会。
典型的例子是响应按钮单击事件。今天的示例包含一个按钮。该按钮的HTML代码如下所示
<button class="btn -primary" id="greeting">欢迎我！> < /按钮
使用一些JavaScript代码，我们可以定位该按钮并将事件处理程序函数附加到其上。该事件处理函数是JavaScript文件中定义的greetingHandler函数。要将该函数附加到按钮上，我们需要执行以下操作：
let greetingButton = document.getElementById('greeting')；greetingButton.addEventListener(“点击”,greetingHandler假);
由于页面中的元素可能会生成几种不同类型的事件，因此addEventListener的第一个参数是我们想要处理的事件类型（在本例中是按钮的单击事件）。第二个参数是我们希望在事件发生时运行的事件处理程序函数的名称。第三个参数设置了在运行事件处理程序后如何进一步处理事件的选项：该参数几乎总是被设置为false。（如果我们需要为第三个参数指定不同的值，我将更详细地解释这个参数的作用。）
这个例子使用了另一种事件——文档加载事件。当文档在浏览器中加载完成时，浏览器将为我们生成一个事件。通过将事件处理程序附加到此事件，我们可以运行赢博体育程序所需的附加设置代码。要为文档加载事件设置一个事件处理程序，我们在JavaScript代码的底部添加以下行代码：
window.addEventListener(“负载”,设置,错误);
该语句使用预定义的DOM变量窗口，并将名为setup的函数设置为加载事件处理程序。
这个例子中的setup函数完成了这个例子需要完成的额外初始化，定位页面中的一个按钮，并为其附加一个click事件处理程序：
function setup() {let greetingButton = document.getElementById('greeting')；greetingButton.addEventListener(“点击”,greetingHandler假);｝