1.6.6　getElementById()方法和innerHTML属性

当制作网页时，通常会将页面分割成不同部分。例如，你可能使用多对<div></div>标签生成多个容器以放置不同的内容。随后，当创建JavaScript程序时，你可能想要把输出放入这些容器之一，或者使用其中某个容器中的内容。例如，你可能要编写一个程序以便计算用户在网上商店的购买总额，而且想要在一个特定区域显示这个总额。要得到HTML容器的内容，可以使用getElementById()方法。

1.6.6.1　getElementById()

网页的每个部分称为一个元素。访问网页特定元素的主要方法是使用getElementById()方法，这种方法允许访问文档中的特定容器，但是在访问时这个容器必须已经存在。

因此，每个容器必须用一个标识符标记，做法是为HTML标签添加id属性。在网页中，每个容器必须有id或名字，以便能够识别。语法如下：

注意容器的名字括在引号中。

假定一个容器的id="puppy"并且包含一种狗的名字，那么在程序中就可以通过这个id访问这个容器的内容并且随后使用。做法是将一个变量（有关变量详见第2章）赋值为通过getElementById()方法访问的容器的内容。语法如下：

这条语句的基本含义是告诉浏览器：“找在文档中命名为puppy的容器，并且将它的内容存储到名为dog的变量中”，以后就能以多种方式使用变量dog。然而，首先要做的是访问存储在dog中的HTML内容。做法是为这个变量附加新的属性，就是innerHTML属性。

1.6.6.2　innerHTML

如上语法所示，变量dog被赋值为容器puppy的内容。其innerHTML属性设置或者返回元素的内部HTML代码。要显示存储在dog中容器的HTML内容，可以使用它的innerHTML属性访问这个内容。做法是使用点标记将innerHTML属性附加在变量dog之后。显示dog的HTML值的语法如下：

例1.17使用getElementById()获取容器的内容，然后使用write()方法显示容器的内容。

例1.17　使用getElementById()、write()和innerHTML　这个例子展示如何访问网页上的内容，然后使用它显示一条新信息。

该页面最初看起来像这样：

然而，当用户单击文字Poodle时，将调用JavaScript函数getValue()（见第15行），然后控制执行第5行。第7行的指令告诉浏览器查找网页中标识符（id）为"puppy"的容器，并且将该容器的内容存储在变量dog中。第8行和第9行使用write()方法在屏幕上显示新的文本。然而第10行做得更多，使用write()方法在屏幕上显示存储在dog中的内容，它使用innerHTML属性访问"puppy"容器中的HTML代码（这里只是文字Poodle）。

在单击文字Poodle之后，屏幕现在看起来像这样：

在这个例子中，为简单没有为用户给出单击文字Poodle的提示，但是在真实的程序中必须添加这种提示或者可能做得更多。此外，后面将学习更多的函数编写、调用和使用方法及其他特性。然而，在开始的时候，只是简单地复制别人的代码并且亲自试一试通常是有价值的，即使并不理解每一条语句。