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的提示，但是在真實的程序中必須添加這種提示或者可能做得更多。此外，后面將學習更多的函數編寫、調用和使用方法及其他特性。然而，在開始的時候，只是簡單地復制別人的代碼并且親自試一試通常是有價值的，即使并不理解每一條語句。